如何為該幻燈片添加自動功能？

Question

我對這個幻燈片的工作方式很滿意，但如果用戶不手動推進幻燈片，我希望它在 3 秒后自動運行。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
    
  }
  slides[slideIndex - 1].classList.add("active");
};

Answer 1

您可以使用setInverval定期自動執行plusSlides 。 如果用戶手動交互，可以使用clearInterval來停止幻燈片的自動前進。

  var interval = setInterval(function() {
      plusSlides(1)
  }, 3000);

這將使幻燈片每 3000 毫秒（3 秒）前進 1 次。 如果您現在想禁用自動前進（可能是因為用戶與某物進行了交互），您可以使用：

clearInterval(interval);