我如何将 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);

我如何将 setInterval 用于轮播？

How do i use setInterval for a carousel?

javascript

carousel

setinterval