带有div和可变秒数的幻灯片旋转木马循环

<div class="carousel">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <!-- 更多幻灯片项 -->
</div>

.carousel {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ccc;
  /* 其他样式设置 */
}

// 获取幻灯片容器和幻灯片项
const carousel = document.querySelector('.carousel');
const slides = carousel.querySelectorAll('.slide');

// 设置初始索引和切换间隔时间（可变秒数）
let currentIndex = 0;
const interval = 3000; // 每3秒切换一次

// 定时切换幻灯片
setInterval(() => {
  // 切换到下一个幻灯片
  const nextIndex = (currentIndex + 1) % slides.length;

  // 添加过渡效果
  slides[currentIndex].classList.add('fade-out');
  slides[nextIndex].classList.add('fade-in');

  // 切换完成后移除过渡效果
  setTimeout(() => {
    slides[currentIndex].classList.remove('fade-out');
    slides[nextIndex].classList.remove('fade-in');
  }, 1000); // 过渡时间为1秒

  // 更新当前索引
  currentIndex = nextIndex;
}, interval);