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

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()。
删除carousel()函数末尾的setTimeout(carousel, 2000);。我们稍后会在playSlideshow()函数中设置间隔
在 playSlideshow() 函数中的这一行 slideInterval = setInterval(nextSlide,2000); 你必须将 nextSlide 更改为 carousel，所以carousel() 函数将每 2 秒调用一次。
最后我们将调用 carousel(); 一次（以避免前 2 秒延迟）然后 playSlideshow();

就是这样。您的 html 部分看起来不错。所以我没有改。

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

html

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

JavaScript

<script>
var playing = true;
var pauseButton = document.getElementById('pause');
var myIndex = 0;

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";
}


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

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

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

carousel();
playSlideshow();
</script>

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

How do i add pause button for automatic slideshow?

html

javascript

jquery

slideshow