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

Slideshow needs to pause after using navigation buttons

本文关键字：幻灯片 暂停 导航 按钮      更新时间：2023-09-26

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

<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 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); //***
}

然后，当用户单击时，重置超时，即使其重新开始：

clearTimeout(tout);
tout = setTimeout(slideIt, 3500);

或者更好的是，将其包装成一个单独的函数：

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

只需从 slideIt() 中调用该函数即可。

确保幻灯片的数量没有硬编码在你的最终代码中（我的意思是你的代码片段中的3），并记住DRY规则（不要重复自己）：你的函数似乎彼此非常相似。

相关文章：