Question

我从w3schools获得了jquery，我已经看了并试图添加一个工作暂停按钮，但它不起作用。

<div class="realisatie" id="slideshow"> 
        <img class="Realisaties" src="fotos/Slide/Foto1.png" alt="Begin van een werk"> 
        <img class="Realisaties" src="fotos/Slide/Foto2.png" alt="Verdere progressie"> 
        <img class="Realisaties" src="fotos/Slide/Foto3.png" alt="Nog niet gevoegd eindwerk"> 
        <img class="Realisaties" src="fotos/Slide/Foto4.png" alt="Eindwerk + gevoegd"> 
        <img class="Realisaties" src="fotos/Slide/Foto5.png" alt="Begin van een tweede werk"> 
        <img class="Realisaties" src="fotos/Slide/Foto6.png" alt="Progressie van tweede werl"> 
        <img class="Realisaties" src="fotos/Slide/Foto7.png" alt="Nog niet gevoegd eindwerk 2"> 
        <img class="Realisaties" src="fotos/Slide/Foto8.png" alt="Eindwerk van een tweede werk"> 
        <img class="Realisaties" src="fotos/Slide/Foto9.jpg" alt="Begin van een derde werk"> 
        <img class="Realisaties" src="fotos/Slide/Foto10.jpg" alt="Progressie van eend erde werk"> 
        <img class="Realisaties" src="fotos/Slide/Foto11.jpg" alt="Derde eindwerk nog niet gevoegd"> 
        <img class="Realisaties" src="fotos/Slide/Foto12.jpg" alt="Derde eindwerk + gevoegd"> 
        <img class="Realisaties" src="fotos/Slide/Foto13.jpg" alt="Houten vloer gelegd"> 
        <img class="Realisaties" src="fotos/Slide/Foto14.png" alt="Andere houten vloer gelegd"> 
    </div>
<button class="controls" id="pause">Pause</button>

这是来自w3学校的笔记本：

<script>
        var myIndex = 0;
        carousel();

        function carousel() {
            var i;
            var x = document.getElementsByClassName("Realisaties");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            myIndex++;
            if (myIndex > x.length) {
                myIndex = 1
            }
            x[myIndex - 1].style.display = "block";
            setTimeout(carousel, 2000); // Change image every 2 seconds
        }
    </script>

这是我从https://codepen.io/SitePoint/pen/zqVGQK/

尝试的代码

var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow(){
    pauseButton.innerHTML = 'Play';
    playing = false;
    clearInterval(slideInterval);
}

function playSlideshow(){
    pauseButton.innerHTML = 'Pause';
    playing = true;
    slideInterval = setInterval(nextSlide,2000);
}

pauseButton.onclick = function(){
    if(playing){ pauseSlideshow(); }
    else{ playSlideshow(); }
};

Answer 1

你的代码中几乎没有@Brad在评论中提到过的问题。所以我会解决这些问题并为你改变一两行：

删除脚本顶部的carousel();。我们将在代码末尾调用playSlideshow()。
删除setTimeout(carousel, 2000);功能末尾的carousel()。我们稍后会在playSlideshow()函数中设置间隔。
在此行playSlideshow()的{{1}}函数中，您必须将 nextSlide 更改为 carousel ，因此slideInterval = setInterval(nextSlide,2000);函数将是每2秒调用一次。
最后我们会拨打carousel()一次（以避免前2秒延迟），然后carousel();

这就是全部。你的playSlideshow();部分看起来不错。所以我没有改变它。

总而言之，您的代码将如下所示：

<强> HTML

html

<强>的JavaScript

<div class="realisatie" id="slideshow"> 
    <img class="Realisaties" src="fotos/Slide/Foto1.png" alt="Begin van een werk"> 
    <img class="Realisaties" src="fotos/Slide/Foto2.png" alt="Verdere progressie"> 
    <img class="Realisaties" src="fotos/Slide/Foto3.png" alt="Nog niet gevoegd eindwerk"> 
    <img class="Realisaties" src="fotos/Slide/Foto4.png" alt="Eindwerk + gevoegd"> 
    <img class="Realisaties" src="fotos/Slide/Foto5.png" alt="Begin van een tweede werk"> 
    <img class="Realisaties" src="fotos/Slide/Foto6.png" alt="Progressie van tweede werl"> 
    <img class="Realisaties" src="fotos/Slide/Foto7.png" alt="Nog niet gevoegd eindwerk 2"> 
    <img class="Realisaties" src="fotos/Slide/Foto8.png" alt="Eindwerk van een tweede werk"> 
    <img class="Realisaties" src="fotos/Slide/Foto9.jpg" alt="Begin van een derde werk"> 
    <img class="Realisaties" src="fotos/Slide/Foto10.jpg" alt="Progressie van eend erde werk"> 
    <img class="Realisaties" src="fotos/Slide/Foto11.jpg" alt="Derde eindwerk nog niet gevoegd"> 
    <img class="Realisaties" src="fotos/Slide/Foto12.jpg" alt="Derde eindwerk + gevoegd"> 
    <img class="Realisaties" src="fotos/Slide/Foto13.jpg" alt="Houten vloer gelegd"> 
    <img class="Realisaties" src="fotos/Slide/Foto14.png" alt="Andere houten vloer gelegd"> 
</div>
<button class="controls" id="pause">Pause</button>

如何为自动幻灯片添加暂停按钮？

1 个答案: