1

我是一名设计师而不是程序员，但我正在尝试掌握 javascript，因此当涉及到插件之外的网页设计时，我有更多的设计选择。所以这就是我遇到的问题。

我有一个包含 4 个幻灯片的页面。现在我有了它，这样当单击 4 个按钮之一时，它会更改数组，它从中获取图像源并每 4 秒循环一次图像。

起初，幻灯片看起来很好，并且在图像隐藏时发生了变化，但几分钟后，源变化随着褪色效果而过时，并在其可见时发生。让节目切换没有问题也可以正常工作。

所有的时间和变量都会被重置，并且onClick-call 中的新参数会切换使用哪个数组。我尝试了一种解决方案，我将图像更改部分设为它自己的函数并从其他函数调用它以更多地控制时间，但由于某种原因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;
}

我不再遇到时间问题了，但是如果我在新幻灯片处于淡出状态时单击新幻灯片，我确实会遇到奇怪的问题然后淡出并从那里开始正确的幻灯片放映。

4

0 回答 0