Как добавить кнопку паузы для автоматического слайд-шоу?

Question

Я получил jquery из w3schools, я посмотрел и попытался добавить рабочую кнопку паузы, но он не работает.

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

<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

У вас есть несколько вопросов, в вашем коде, что затронуло @ Брэд их в его комментарии. Поэтому я исправлю их и изменю вам одну или две строки:

1. удалите carousel(); в верхней части вашего скрипта. Мы будем называть playSlideshow() вместо этого в конце кода.
2. Удалить setTimeout(carousel, 2000); в конце carousel() функция. Мы установим интервал в функции playSlideshow() позже.
3. в playSlideshow() функции в этой линии slideInterval = setInterval(nextSlide,2000); вы должны изменить nextSlide к каруселью, так carousel() функция будет вызываться каждые 2 секунды.
4. и, наконец, мы будем называть 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>