4
我想将进度条添加到JavaScript幻灯片（如SlidesJS或Nivoslider）。如何将进度条（时间轴）添加到滑块，如幻灯片或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();
});