幻灯片 javascript 播放/暂停按钮答案

【问题标题】：Slideshow javascript play/pause button幻灯片 javascript 播放/暂停按钮
【发布时间】：2016-02-09 18:29:11
【问题描述】：

我正在用 Javascript 制作带有播放/暂停按钮的幻灯片。当我按一次按钮时，幻灯片开始播放。当我第二次按下时，幻灯片必须停止。我只是不知道如何将这个功能放在一个按钮中。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Oefening 19.7</title>
    <link href="stijl_Oefening19_6.css" rel="stylesheet" />
    <script>
    var i = 0;
    var foto = new Array(3);
    var timer;

    foto[0] = "images/slideshow/slideshow1.png";
    foto[1] = "images/slideshow/slideshow2.png";
    foto[2] = "images/slideshow/slideshow3.png";
    foto[3] = "images/slideshow/slideshow4.png";

    function slide() {

            document.getElementById("slideshow").src = foto[i];

            if (i < foto.length - 1) i++;
            else i = 0;

            timer = setTimeout("slide()", 3000);
    }
    </script>
</head>

<body>
    <div id="portfolio">
        <img src="images/slideshow/slideshow1.png" id="slideshow" alt="slideshow" />
    </div>
    <div id="button">
        <a href="#" id="startcycle" onclick="slide()">
            <img id="btnCycle" src="images/slideshow/cyclebutton.png" />
        </a>
    </div>
</body>

</html>

【问题讨论】：

你不应该自己做作业吗？顺便说一句，您的 slide() 函数中似乎缺少 }。
foto 是一个包含 4 个元素的数组。构造函数获取要创建的元素的数量，不是最高元素的索引。 - 此外，您可以轻松实现标志。在按钮按下处理程序中，您只需在 true 和 false 之间切换它。如果标志为假，则不要更改图像。否则，照常进行。
与论坛网站不同，我们不使用“谢谢”、“任何帮助表示赞赏”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?.

标签： javascript html slideshow

【解决方案1】：

请改用 setInterval()。并将开关功能和滑动功能分开。

function slide() {
    document.getElementById("slideshow").src = foto[i];
    i = (i + 1)%foto.length;
}
function setTimer(){
    if (timer) {
       // stop 
       clearInterval( timer );
       timer=null;
    }
    else {
       timer = setInterval("slide()",1000);
    }
}

让按钮调用 setTimer()。

【讨论】：

不错的答案。只需更改“clearTimeout（计时器）；”到“清除间隔（计时器）；”这将是完美的。
糟糕，错字。感谢调试。