如何将setInterval用于转盘

Question

我正试图通过使用setInterval函数使我的转盘自动播放，但我一直没有成功。

最后，我尝试调用setInterval函数中的carousel函数，但它不起作用。。我做错了什么？

这是沙盒https://codesandbox.io/s/slider-7ph05?file=/src/index.js

这是我的JS代码：

const slides = document.querySelectorAll(".slide");
const prevBtn = document.querySelector(".prevBtn");
const nextBtn = document.querySelector(".nextBtn");
// Inline callback function
// forEach(function(element, index, array){ ... })
slides.forEach(function (slide, index) {
slide.style.left = `${index * 100}%`;
// console.log(slide);
// console.log(index);
// console.log(array);
});
let count = 0;
nextBtn.addEventListener("click", function () {
count++;
carousel();
});
prevBtn.addEventListener("click", function () {
count--;
carousel();
});
function carousel() {
slides.forEach(function (slide) {
if (count > slides.length - 1) {
count = 0;
}
if (count < 0) {
count = slides.length - 1;
}
slide.style.transform = `translateX(-${count * 100}%)`;
// console.log(slides.length);
// console.log(slide);
// console.log(count);
});
}
setInterval(carousel, 3000);

Answer 1

当按下下一个或上一个按钮时，您似乎既没有增加setInterval中的count变量，也没有像您那样调用carousel函数。更新setInterval以增加计数器并调用carousel函数。

setInterval(()=>{
count++ //increment the counter
carousel() //call the function
}, 3000);

你的索引文件应该是这样的：

const slides = document.querySelectorAll(".slide");
const prevBtn = document.querySelector(".prevBtn");
const nextBtn = document.querySelector(".nextBtn");
// Inline callback function
// forEach(function(element, index, array){ ... })
slides.forEach(function (slide, index) {
slide.style.left = `${index * 100}%`;
// console.log(slide);
// console.log(index);
// console.log(array);
});
let count = 0;
nextBtn.addEventListener("click", function () {
count++;
carousel();
});
prevBtn.addEventListener("click", function () {
count--;
carousel();
});
function carousel() {
slides.forEach(function (slide) {
if (count > slides.length - 1) {
count = 0;
}
if (count < 0) {
count = slides.length - 1;
}
slide.style.transform = `translateX(-${count * 100}%)`;
// console.log(slides.length);
// console.log(slide);
// console.log(count);
});
}
setInterval(()=>{
count++
carousel()
}, 3000);