Question

我不仅仅是一名程序员，而是一名设计师，但我正试图掌握javascript，因此除了插件外，我还有更多的设计选择。所以这就是我遇到的问题。

我有一个包含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;
}

我不再对时间有问题了，但如果我在fadeOut上点击一个新的幻灯片，我会得到一个奇怪的打嗝，它会改变图像然后改变回来然后用下一个图像淡入之前的幻灯片放映然后淡出并从那里开始正确的幻灯片放映。

幻灯片放映几分钟后，图像源在错误的时间发生变化

0 个答案: