Javascript 幻灯片疑难解答（计时器和动画）

我正在尝试使用html、css和纯javascript从头开始创建幻灯片，但我不知道该怎么做，因此当我单击其中一个幻灯片指示器时，setInterval（）会重置其计时器（以便能够更改幻灯片，而无需直接切换到下一个幻灯片，因为只剩下1秒钟）

我曾尝试使用clearInterval（）重置计时器，然后重新激活setInterval（），但当我单击其中一个幻灯片放映指示器时，幻灯片开始随机更改（由于某些原因，它们不会跟随setInterval（）的6000毫秒计时器）

var slides=document.querySelectorAll（“.slide”）；
var dots=document.queryselectoral（“.dot”）；
函数removeClass（）{
对于（变量i=0；i

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

var slides=document.querySelectorAll（“.slide”）；
var dots=document.queryselectoral（“.dot”）；
函数removeClass（）{
对于（变量i=0；i

尝试在滑动播放之前取出第二个“var”。您可能正在创建两个名为slideDelay的独立变量。谢谢！这解决了时间间隔的问题。没问题，您介意将此问题标记为已解决。

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