您遇到的问题是动画时间和点击触发器之间的同步。
此外,当用户单击按钮时,您不会取消下一个计划的操作。
假设我们在幻灯片 2 上,这意味着已经有一个计时器应该显示幻灯片 3,当我单击按钮 1 时,第一个计时器将保持运行以显示幻灯片 3,并且将创建另一个计时器以显示幻灯片 1。我解决了这个问题通过按住计时器并清除它。
另一个问题是,在您的 adnimation: fadeIn 回调中,您添加了按钮的单击 lisiner,我认为这会添加许多监听器,因此当您单击两次时,您将附加相同的监听器两次,因此在触发时调用两次。
这是我这边的修正作品。可能还有其他问题。
请注意单击和转换之间的时间。例如,如果您将 fadeIn 时间设置为与 setTimeout 相同的时间,您也会遇到同样的问题。
$(function () {
//edit
var timer='undefined';
var slides = new Array();
slides[0] = 'http://i.imgur.com/UwRVo.png';
slides[1] = 'http://i.imgur.com/wv08B.png';
slides[2] = 'http://i.imgur.com/MlUbx.png';
var max = $(slides).length;
var isBottom = false;
makeSlideBtns(max);
if(max>0)
{
LoadSlide(0,max);
}
function LoadSlide(index,max) {
clearTimeout(timer);
if(index<max)
{
var el0 = $("#slidebottom");
var el1 = $("#slideover");
var sbtn = $("#slidebtns li")[index];
var img = new Image();
$(sbtn).css('background-color', '#000');
$(img).load(function () {
$(this).css('display','none');
if(isBottom == true)
{
$(el1).html(this);
$(el1).css('z-index', '3');
$(el0).css('z-index', '2');
console.log("el1 " + index);
} else {
$(el0).html(this);
$(el1).css('z-index', '2');
$(el0).css('z-index', '3');
console.log("el0 " + index);
}
isBottom = !isBottom;
function nextSlide () {
LoadSlide(index+1,max);
console.log("sbtn: " + sbtn);
$(sbtn).css('background-color', '#fff');
};
$(this).fadeIn(2000,function() {
timer=setTimeout(nextSlide, 5000);
});
}).error(function () {
LoadSlide(index+1,max);
}).attr('src', slides[index]);
} else {
LoadSlide(0,max)
}
}
function makeSlideBtns (max) {
for(i=0; i<max; i++) {
var num = i + 1;
$("#slidebtns").append('<li><a>' + num + '</a></li>');
}
};
//add this in your loop will add more as you click
$("#slidebtns li").click(function () {
$("#slidebtns li").css('background-color', '#fff');
var i=$(this).index();
LoadSlide(i,max);
return false;
});
});