Javascript 幻灯片放映几分钟后图像源在错误的时间更改

我是一名设计师而不是程序员，但我正试图掌握javascript的诀窍，因此在涉及插件之外的web设计时，我有更多的设计选项。这就是我的问题

我有一页有4张幻灯片。现在我有了它，所以当点击4个按钮中的一个时，它会改变它获取图像源的数组，并每4秒循环一次图像

起初，幻灯片看起来不错，图像隐藏时会发生更改，但几分钟后，源更改会随着淡入淡出效果而过时，并在其可见时发生。它也可以正常工作，显示开关没有问题

所有定时和变量都会重置，新参数将从

onClick

-调用开关中选择所使用的数组。我尝试了一种解决方案，其中我将图像更改部分设置为它自己的函数，并从其他函数调用它来控制更多的计时，但由于某种原因，

clearTimeout

停止工作以清除循环，它仍然会在同一时间播放循环的一个实例

也许有人可以看看这段代码，并看到一个简单的修复时间问题

i=0
var delay=4000
var fade=1000
var timer;

function play(showNum){
    var showNum = showNum; 
    $("#show").stop(true,true)
    newShow(); 
    changeInfo(showNum);
    $("#show").hide();
    change(showNum);
}

function change(showNum){
    $("#show").fadeIn(fade);
    $("#show").attr("src",showNum[i]);
    i = (i+1)% showNum.length;
    $("#show").delay(delay-(fade*2)).fadeOut(fade);
    timer=setTimeout (function(){change(showNum)},delay)
}

function newShow(){
    clearTimeout(timer);
    i=0;
}

这是一个更新的代码，因为我发布了这个

function play(showNum){
var showNum = showNum; 
$("#show").stop(true,true);
newShow(); 
$("#show").hide();
changeInfo(showNum);
change(showNum);
$("#show").fadeIn(fade);
setTimeout(function(){loop(showNum);},fade*2);
}
function loop(showNum){
$("#show").fadeOut(fade);
setTimeout (function(){change(showNum);},fade);
$("#show").fadeIn(fade);
int=setTimeout (function(){loop(showNum);},delay);
}

function change(showNum){
$("#show").attr("src",showNum[i]);
i = (i+1)% showNum.length;
}

function newShow(){
 clearTimeout(int);
 i=0;
}

---

我再也没有时间上的问题了，但如果我在淡出状态下点击一个新的幻灯片，它会改变图像，然后又变回来，然后淡入上一个幻灯片的下一个图像，然后淡出并从那里开始正确的幻灯片放映，我确实会遇到一个奇怪的问题。

这就是你的代码吗？在change（）中，

timmer

应该是

timer

O对不起。我意识到我把“timer”拼错为“timmer”，并想在我提交帖子之前更改它，但我想我错过了一个。在代码中他们都是“timmer”。我会修正它，以防其他人看到它。