Question

我想弄清楚如何在纯 JS 中在滑块中进行自动滚动。我需要幻灯片每 n 次滚动一次，例如 5 秒，我可以在手动滚动后以某种方式更新计时器吗？

HTML + CSS + JS：https://jsfiddle.net/k72nth41/

js代码：

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById ('prev');
let next = document.getElementById ('next');

next.addEventListener ("click", function () {
  showSlides(slideIndex += 1);

});

prev.addEventListener ("click", function () {
  showSlides(slideIndex -= 1);
});

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


function showSlides(n) {
    let slides = document.getElementsByClassName("myslide");
    if (n > slides.length) {
      slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
 
    for (let slide of slides) {
        slide.style.display = "none";
    }
    slides[slideIndex - 1].style.display = "flex";    
  }

 let timer = setInterval(function(){
    slideIndex++;
    showSlides(slideIndex);
  },5000);

Answer 1

您可以使用 setInterval 返回的值调用 clearInterval。

您的代码创建了一个变量 timer：

let timer = setInterval(function(){
  slideIndex++;
  showSlides(slideIndex);
}, 5000);

可以用来停止间隔：

clearInterval(timer);

停止后，您需要开始一个新的时间间隔。

滑块自动滚动

1 个答案: