Cómo agregar una barra de progreso (línea de tiempo) a un control deslizante como diapositivas o nivoslider

I want to add a progress bar to a JavaScript slideshow (like SlidesJS or Nivoslider).

Encontré esta pregunta, which covers some of what I need, but I can;t intergrate it into my slideshow.

Here is an example of what I'm after.

For example, when I focus the slideshow (or click pause button), timeline and slider will be paused, and I can resume (when I move out).

Aquí está el código que tengo hasta ahora:

<div id="products_example">
    <div id="products">
        <div id="slides_timeline"></div>
        <div class="slides_container">
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a>
            <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a>
        <ul class="pagination">
            <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li>
            <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li>
            <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li>
            <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li>
            <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li>
            <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li>
            <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li>
        preload: true,
        preloadImage: 'img/loading.gif',
        effect: 'fade',
        fadeSpeed: 500,
        generateNextPrev: true,
        generatePagination: false,              
        play: 5000,
        animationStart: function(){animateTimeline();}, // Function called at the start of animation
        animationComplete: function(){}, // Function called at the completion of animation
        slidesLoaded: function() {} // Function is called when slides is fully loaded

////reset timeline
function resetTimeline(){
    var timeline = $("#slides_timeline");

////animate timeline
function animateTimeline(){
    var timeline = $("#slides_timeline");

$("#products .next,.pagination li a").click(function(){

preguntado el 01 de febrero de 12 a las 04:02

1 Respuestas

there are a couple different ways you can do this but from a high level here is what I would do:

Every single one of these types of slideshows whether you make it or not uses basically a setInterval function and you are clearing the timer or pausing it when you mouse over. So you have access to a variable someplace within the function that specifies the number of milliseconds you want each slide to show before it moves on and the setInterval fires a function that moves to the next slide. I would access this variable and then use it to drive the jquery rotate plugin which you can micro control the rotation of using the milliseconds in the slider function.


If you want a progress bar style like the one in your example you would basically need to convert the number of milliseconds for each slide into a percentage something like: (current / total milliseconds) * 100 and then apply that as the percentage width on the progress bar to make it look like it's animating across.

Respondido 13 Oct 13, 12:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.