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

Question

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

我曾尝试使用 clearInterval() 重置计时器，然后重新激活 setInterval() 但是当我点击其中一个幻灯片指示器时，幻灯片开始随机变化（它们不遵循 6000 毫秒计时器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.
    }
});

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

Slideshow Troubleshooting (Timer & Animation)

html

javascript

css

animation

slideshow