js实现div的轮播切换

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

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

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  min-width: 100%;
  height: 200px;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

.carousel-item.active {
  display: flex;
}

const items = document.querySelectorAll('.carousel-item');
let currentIndex = 0;

function showNextItem() {
  // 隐藏当前项
  items[currentIndex].classList.remove('active');

  // 计算下一项的索引
  currentIndex = (currentIndex + 1) % items.length;

  // 显示下一项
  items[currentIndex].classList.add('active');
}

// 设置定时器，每隔3秒切换一次
setInterval(showNextItem, 3000);