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

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

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.

    }

});