幻灯片故障排除（计时器和动画）

Question

我正在尝试使用html，css和普通javascript完全从头开始创建幻灯片，但我无法弄清楚该做什么，当我点击其中一个幻灯片指示器时，setInterval（）重置其计时器（为了能够改变幻灯片没有它直接切换到下一个幻灯片，因为例如，只有1秒左右）

我试图用clearInterval（）重置计时器然后重新激活setInterval（），但是当我点击其中一个幻灯片指示器时，幻灯片开始随机变化（它们不遵循SetInterval（）的6000ms计时器由于某些原因）。

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