Question

我有一张幻灯片，每秒显示一张图片

但我想要一个“停止按钮”以便.....停止旋转木马XD我正在处理它但是我将两个功能分开（一个用于旋转木马，一个用于按钮）。

这是HTML

<div id="gallerie2">
    <img id="first2" src="http://lorempicsum.com/futurama/150/150/2"><br/>
    <div id="vignette">
        <img class="second2" src="http://lorempicsum.com/futurama/150/150/6">
        <img class="second2" src="http://lorempicsum.com/futurama/150/150/4">
        <img class="second2" src="http://lorempicsum.com/futurama/150/150/3">
        <img class="second2" src="http://lorempicsum.com/simpsons/150/150/2">
        <img class="second2" src="http://lorempicsum.com/simpsons/150/150/1">
        <img class="second2" src="http://lorempicsum.com/simpsons/150/150/4">
    </div>
</div>

<div id="controlSlideShow">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
</div>

以下是幻灯片演示的Javascript（效果很好，不是问题）

var index = 0;
    setInterval(function nextSlide(){
        var slides = document.getElementsByClassName("second2");
        var firstSlide = document.getElementById("first2");
        firstSlide.src = slides[index].src;
        index++;
        if(index == slides.length){
            index = 0;   
        }
    }, 1000);

然后这是问题所在的按钮的Javascript

    document.getElementById("controlSlideShow").addEventListener('click', controlSlideShow);
    function controlSlideShow(e){
        switch(e.target.id){
            case 'stop':
                console.log("clickStop");
                clearTimeout(nextSlide);
            break;
            case 'start': console.log("start");
            break;   
        }
    }

我正在处理这些按钮，但我无法调用nextSlide（）函数一个clearTimeout（）来停止幻灯片放映。

感谢您抽出时间解决我的问题。解决后你能解释一下吗？我真的想知道我的错误在哪里，而不仅仅是采取解决方案。 =）

这是jsFiddle：page

Answer 1

您需要传递给clearInterval（不是clearTimeout）的参数不是您传递给setInterval的函数的名称，而是setInterval返回的值。所以这样做：

var timerId = setInterval(function nextSlide(){
     // ... etc
}, 1000);
// ...
clearInterval(timerId);
// ...

注意：clearTimeout也可以在大多数浏览器中使用，但在使用clearInterval时调用setInterval更有意义，而在使用{clearTimeout时调用setTimeout更有意义1}}。

Javascript - 停止幻灯片显示超时

1 个答案: