gpt4 book ai didi

javascript - 幻灯片故障排除(计时器和动画)

转载 作者:搜寻专家 更新时间:2023-10-31 08:39:02 25 4
gpt4 key购买 nike

我正在尝试使用 html、css 和纯 javascript 完全从头开始创建幻灯片,但我不知道该怎么做,所以当我单击其中一个幻灯片指示器时,setInterval() 会重置其计时器(按顺序能够在不直接切换到下一张的情况下更改幻灯片,因为例如,只剩下 1 秒)

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

最佳答案

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

关于javascript - 幻灯片故障排除(计时器和动画),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55652257/

25 4 0
文章推荐: javascript - 为什么CSS是:hover not working as it should?
文章推荐: html - 如何允许用户手动调整
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com