Javascript 使用导航按钮后，幻灯片放映需要暂停

我希望我的幻灯片导航按钮在图像之间移动，在该图像上暂停，然后继续运行幻灯片。当前，当用户单击时，图像会发生更改。根据此事件发生的时间，幻灯片将跳过图像或快速显示两个图像。我不知道如何在幻灯片放映继续之前创建我想要的暂停。我的代码当前如下所示：

<script type="text/javascript" language="JavaScript">
    var step = 0;
    function slideIt(){
        if(!document.images) return; 
            document.getElementById('slide').src = slideshow[step].src;
                if (step < 3){
                    step++;
                }
                else{
                    step = 0;
                }
            setTimeout('slideIt()', 3500);
    }
    function previousImg(){
        if(!document.getElementById) return;
            document.getElementById('slide').src = slideshow[step].src;
                if (step > 0){
                    step--;
                }
                else{
                    step = 3;
                }
    }
    function nextImg(){
        if(!document.getElementById) return;
            document.getElementById('slide').src = slideshow[step].src;
                if (step < 3){
                    step++;
                }
                else{
                    step = 0;
                }
    }
    slideIt();
</script>

var阶跃=0；
函数slideIt（）{
如果（！document.images）返回；
document.getElementById（'slide'）.src=slideshow[step].src；
如果（步骤<3）{
step++；
}
否则{
步长=0；
}
设置超时（'slideIt（）'，3500）；
}
函数previousImg（）{
如果（！document.getElementById）返回；
document.getElementById（'slide'）.src=slideshow[step].src；
如果（步骤>0）{
步骤--；
}
否则{
步骤=3；
}
}
函数nextImg（）{
如果（！document.getElementById）返回；
document.getElementById（'slide'）.src=slideshow[step].src；
如果（步骤<3）{
step++；
}
否则{
步长=0；
}
}
slideIt（）；

---

同样，我不希望幻灯片放映完全停止，只需暂停。

我认为您只需要重置超时。设置超时时，保留对其的引用：

var tout; //declare a variable that will hold reference to your timeout***
var step = 0;
function slideIt(){
    if(!document.images) return; 
    document.getElementById('slide').src = slideshow[step].src;
        if (step < 3) {
            step++;
        }
        else {
            step = 0;
        }
    tout = setTimeout(slideIt, 3500); //***
}

或者更好地将其包装到单独的函数中：

function restartTimeout() {
    clearTimeout(tout);
    tout = setTimeout(slideIt, 3500);
}

只需从

slideIt（）中调用该函数即可

另外，请确保幻灯片的数量没有硬编码在您的最终代码中（我指的是片段中的
3
），并记住
DRY
规则（不要重复自己）：您的功能似乎彼此非常相似。
对于“前进”按钮，它工作得非常好，但是我遇到了两个问题：当点击按钮时，它在超时时间快结束时会跳起来，而对于后退按钮，它似乎不起作用。您可以发布在点击按钮时调用的代码吗（即，您实际何时调用那些
previousImg（）
和
nextImg
函数）？你说它变得神经质是什么意思：）？html代码如下所示：1。后退按钮的问题在于，当运行
previousImg
函数时，实际上使用了
step
的值，该值是在先前的调用中设置的，例如
nextImg
。为了避免这种情况，您应该在更改幻灯片之前增加/减少
步骤
，而不是在更改幻灯片之后。2.确保在函数
nextImg
和
previousImg
中也清除超时，并且使用
tout=setTimeout（slideIt，3500）执行此操作而不是字符串
tout=setTimeout（'slideIt（）'，3500）
function restartTimeout() {
    clearTimeout(tout);
    tout = setTimeout(slideIt, 3500);
}