Jquery 滑块 - 第一张幻灯片滚动速度太快

Question

我有一个带进度条的图像滑块。 https://jsfiddle.net/vandanasrivastava/voe49n8r/1/ 滑块自动旋转。但问题是，首先幻灯片滚动太快了。我是 javascript 的新手。任何帮助深表感谢。请检查以下JS fiddle.

var currentIndex = 0;// store current pane index displayed
var ePanes = $('#slider .panel'), // store panes collection
time   = 5000,
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

在第 24 行，你触发了 showPane(0)，但随后你在 run 函数上运行 showPane(currentIndex+1)。

此外，在第一行设置 currentIndex = -1 而不是 0.

所以基本上你运行宁它两次。只需注释掉 showPane(0) 即可。

Jquery 滑块 - 第一张幻灯片滚动速度太快

Jquery Slider - first slide scrolls too fast

html

javascript

jquery

slider