如何使用setInterval实现轮播图自动播放？代码不生效该如何解决？

问题原因 #

你当前的自动播放逻辑未生效，核心问题是setInterval直接调用carousel函数时，全局计数变量count没有更新，每次执行carousel都是基于同一个count值计算位移，所以轮播图不会切换。
另外你当前把count的边界判断写在slides.forEach循环内部，属于冗余逻辑，每遍历一张轮播图就会重复执行一次判断，实际只需要执行一次即可。

修复方案 #

把setInterval的回调逻辑调整为：每次触发时先给count加1，再调用carousel函数执行轮播位移。同时可以把边界判断从循环中移出，优化执行效率。

修改后的完整代码 #

const slides = document.querySelectorAll(".slide");
const prevBtn = document.querySelector(".prevBtn");
const nextBtn = document.querySelector(".nextBtn");

slides.forEach(function (slide, index) {
  slide.style.left = `${index * 100}%`;
});

let count = 0;
nextBtn.addEventListener("click", function () {
  count++;
  carousel();
});

prevBtn.addEventListener("click", function () {
  count--;
  carousel();
});

function carousel() {
  // 边界判断移到循环外，仅执行一次
  if (count > slides.length - 1) {
    count = 0;
  }
  if (count < 0) {
    count = slides.length - 1;
  }
  slides.forEach(function (slide) {
    slide.style.transform = `translateX(-${count * 100}%)`;
  });
}

// 修改setInterval的回调逻辑，先更新count再调用轮播
setInterval(() => {
  count++;
  carousel();
}, 3000);

内容的提问来源于stack exchange，提问作者Bernard