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

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() {&nbsp; &nbsp; for (var i = 0; i < slides.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; slides[i].classList.remove('active');&nbsp; &nbsp; }}function removeNext() {&nbsp; &nbsp; for (var i = 0; i < slides.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; slides[i].classList.remove('next');&nbsp; &nbsp; }}function slideshow() {&nbsp; &nbsp; currentSlide = document.querySelector(".active");&nbsp; &nbsp; nextSlide = currentSlide.nextElementSibling;&nbsp; &nbsp; if (nextSlide != null) {&nbsp; &nbsp; &nbsp; &nbsp; removeClass();&nbsp; &nbsp; &nbsp; &nbsp; nextSlide.classList.add('next');&nbsp; &nbsp; &nbsp; &nbsp; nextSlide.classList.add('active');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; removeClass();&nbsp; &nbsp; &nbsp; &nbsp; slides[0].classList.add('next');&nbsp; &nbsp; &nbsp; &nbsp; slides[0].classList.add('active');&nbsp; &nbsp; }&nbsp; &nbsp; removeNext();}var slideDelay = setInterval(slideshow, 6000);document.addEventListener("click", function (event) {&nbsp; &nbsp; if (event.target.className == "dot") {&nbsp; &nbsp; &nbsp; &nbsp; removeClass();&nbsp; &nbsp; &nbsp; &nbsp; var dotAttrValue = event.target.getAttribute('data-slide-to');&nbsp; &nbsp; &nbsp; &nbsp; slides[dotAttrValue - 1].classList.add('active');&nbsp; &nbsp; &nbsp; &nbsp; clearInterval(slideDelay);&nbsp; &nbsp; &nbsp; &nbsp; slideDelay = setInterval(slideshow, 6000);//Var removed from here.&nbsp; &nbsp; }});