滑动条自动滚动

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

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