jQuery Slider – 进度条

类似于： 带有进度条的Jquery滑块

我有这个滑块和进度条，但我希望进度条与“上一个”和“下一个”按钮同步。 因此，当您单击“下一步”时，进度条将从头开始。

http://jsfiddle.net/aidenguinnip/8rJws/

$(window).load(function(){ var currentIndex = 0;// store current pane index displayed var ePanes = $('#slider .panel'), // store panes collection time = 3000, bar = $('.progress_bar'); function showPane(index){// generic showPane // hide current pane ePanes.eq(currentIndex).stop(true, true).fadeOut(); // set current index : check in panes collection length currentIndex = index; if(currentIndex = ePanes.length) currentIndex = 0; // display pane ePanes.eq(currentIndex).stop(true, true).fadeIn(); // menu selection $('.nav li').removeClass('current').eq(currentIndex).addClass('current'); } // bind ul links $('.nav li').click(function(ev){showPane($(this).index());}); // bind previous & next links $('.previous').click(function(){showPane(currentIndex-1);}); $('.next').click(function(){showPane(currentIndex+1);}); // apply start pane showPane(0); function run(){ bar.width(0); showPane(currentIndex+1); bar.animate({'width': "+=400"}, time, run); } run(); }); 

Answer 1

干得好…

http://jsfiddle.net/8rJws/1/

我停止动画并在更改幻灯片时将条宽重置为0，然后重新启动动画（参见第10行）……

 bar.stop(true, true).css("width", 0).animate({'width': "+=400"}, time, run);