Question

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

<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>

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

Answer 1

我认为你只需要重置超时。设置超时时，请保持对它的引用：

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()内调用该功能。

PS。请确保您的最终代码中没有硬编码幻灯片的数量（我的意思是代码段中的3）并记住 DRY规则（不要重复自己）< / strong>：你的功能似乎彼此非常相似。

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

1 个答案: