jQuery Slider - 进度条

Question

类似于：Jquery slider with progress bar

我有这个滑块和进度条，但我希望进度条与＆＃34;之前的＆＃34;同步。和＆＃34; next＆＃34;按钮也是。所以当你点击＆＃34; next＆＃34;进度条从头开始。

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 < 0) currentIndex = ePanes.length-1;
    else 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);