将旋转木马设置为自动滚动

<div class="carousel">
  <div class="carousel-item">内容1</div>
  <div class="carousel-item">内容2</div>
  <div class="carousel-item">内容3</div>
  ...
</div>

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

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
}

var carouselItems = document.querySelectorAll('.carousel-item');
var currentIndex = 0;

function showNextItem() {
  carouselItems[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % carouselItems.length;
  carouselItems[currentIndex].classList.add('active');
}

setInterval(showNextItem, 3000); // 每隔3秒切换一次内容