javascript - 无法停止 slider

Question

尝试制作最简单的画廊。有一个按钮可以将图像变成<button class = "play-pause">Play</ button> 。点击它开始setInterval ，但再次按下时需要停止。如何做到这一点？

这是沙箱的链接:http://jsfiddle.net/eL31q3eq/

我的尝试:

document.querySelector('.play-pause').addEventListener('click', function() {
    if(timer == null) clearInterval(timer);

    this.innerHTML = "Pause";

    timer = setInterval(function() {
        i = (i < images.length - 1) ? ++i : 0;
        img.src = images[i];
    }, 1000);

    timer = null;
});

Answer 1

您正在丢弃停止幻灯片放映所需的变量 - 此处的解决方案。

http://jsfiddle.net/obh5tanL/

也不要初始化计时器变量。

document.querySelector('.play-pause').addEventListener('click', function() {
    if (timer) {
        clearInterval(timer);
        this.innerHTML = "Play";
    }
    else {
        this.innerHTML = "Pause";

        timer = setInterval(function() {
            i = (i < images.length - 1) ? ++i : 0;
            img.src = images[i];
        }, 1000);
    }

});