如何添加进度条(时间线)到滑块，如幻灯片或nivoslider

Question

我想添加一个进度条到一个JavaScript幻灯片(像SlidesJS或Nivoslider)。

我找到了this question，它涵盖了我需要的一些东西，但我不能把它整合到我的幻灯片中。

Here is an example of what I'm after.

例如，当我聚焦幻灯片放映(或单击暂停按钮)时，时间线和滑块将暂停，我可以继续(当我移出时)。

以下是我到目前为止拥有的代码：

<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>
        </div>
        <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>
        </ul>
    </div>
</div>

$(function(){
    $('#products').slides({
        preload: true,
        preloadImage: 'img/loading.gif',
        effect: 'fade',
        slideSpeed:300,
        crossFade:true,
        fadeSpeed: 500,
        generateNextPrev: true,
        generatePagination: false,              
        play: 5000,
        hoverPause:true,
        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");
    timeline.css({width:'0'},0);
}

////animate timeline
function animateTimeline(){
    var timeline = $("#slides_timeline");
    timeline.stop().css({width:'0',opacity:1},0);
    timeline.stop().animate({width:'100%'},5000,'linear',function(){$(this).animate({opacity:0,width:0})});
}

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

Answer 1

有几种不同的方法可以做到这一点，但从更高的层次来看，我会这样做：

这些类型的幻灯片中的每一种，无论你做不做，基本上都使用一个setInterval函数，当你将鼠标移到上面时，你会清除计时器或暂停计时器。因此，您可以在函数中的某个位置访问一个变量，该变量指定您希望每张幻灯片在移动到下一张幻灯片之前显示的毫秒数，并且setInterval会触发一个移动到下一张幻灯片的函数。我将访问这个变量，然后使用它来驱动jquery rotate插件，您可以使用滑块函数中的毫秒来微控制旋转。

https://code.google.com/p/jqueryrotate/

如果你想要一个像你的例子中那样的进度条样式，你基本上需要将每张幻灯片的毫秒数转换成一个百分比，比如：(当前/总毫秒)* 100，然后在进度条上应用它作为百分比宽度，使它看起来像是动画。