我如何将 setInterval 用于轮播？

Question

我正在尝试使用 setInterval 函数让我的轮播自动播放，但我一直没有运气。

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

这里是沙盒 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);