如何为该幻灯片添加自动功能？

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