javascript - 幻灯片故障排除(计时器和动画)

Question

我正在尝试使用 html、css 和纯 javascript 完全从头开始创建幻灯片，但我不知道该怎么做，所以当我单击其中一个幻灯片指示器时，setInterval() 会重置其计时器(按顺序能够在不直接切换到下一张的情况下更改幻灯片，因为例如，只剩下 1 秒)

我曾尝试使用 clearInterval() 重置计时器，然后重新激活 setInterval() 但是当我点击其中一个幻灯片指示器时，幻灯片开始随机变化(它们不遵循 6000ms 计时器SetInterval() 出于某种原因)。

var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");

function removeClass() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
}

function removeNext() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('next');
  }
}

function slideshow() {
    currentSlide = document.querySelector(".active");
    nextSlide = currentSlide.nextElementSibling;
    if (nextSlide != null) {
        removeClass();
        nextSlide.classList.add('next');
        nextSlide.classList.add('active');
    } else {
        removeClass();
        slides[0].classList.add('next');
        slides[0].classList.add('active');
    }
    removeNext();
}

var slideDelay = setInterval(slideshow, 6000);

document.addEventListener("click", function(event){
    if (event.target.className == "dot") {
        removeClass();
        var dotAttrValue = event.target.getAttribute('data-slide-to');
        slides[dotAttrValue-1].classList.add('active');
        clearInterval(slideDelay);  
        var slideDelay = setInterval(slideshow, 6000);
    }
});

Answer 1

有两个 var 声明会创建两个单独的间隔。只需摆脱第二个，您就可以开始了。

var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");

function removeClass() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].classList.remove('active');
    }
}

function removeNext() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].classList.remove('next');
    }
}

function slideshow() {
    currentSlide = document.querySelector(".active");
    nextSlide = currentSlide.nextElementSibling;
    if (nextSlide != null) {
        removeClass();
        nextSlide.classList.add('next');
        nextSlide.classList.add('active');
    } else {
        removeClass();
        slides[0].classList.add('next');
        slides[0].classList.add('active');
    }
    removeNext();
}

var slideDelay = setInterval(slideshow, 6000);

document.addEventListener("click", function (event) {
    if (event.target.className == "dot") {
        removeClass();
        var dotAttrValue = event.target.getAttribute('data-slide-to');
        slides[dotAttrValue - 1].classList.add('active');
        clearInterval(slideDelay);
        slideDelay = setInterval(slideshow, 6000);//Var removed from here.
    }
});