如何将setInterval用于旋转木马？

// HTML结构
<div class="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

// CSS样式
.carousel {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}

.carousel img.active {
  opacity: 1;
}

// JavaScript代码
var carousel = document.querySelector('.carousel');
var images = carousel.querySelectorAll('img');
var currentIndex = 0;

function rotateCarousel() {
  // 隐藏当前图片
  images[currentIndex].classList.remove('active');
  
  // 计算下一张图片的索引
  currentIndex = (currentIndex + 1) % images.length;
  
  // 显示下一张图片
  images[currentIndex].classList.add('active');
}

// 初始显示第一张图片
images[currentIndex].classList.add('active');

// 每隔3秒切换一张图片
setInterval(rotateCarousel, 3000);