写一个每个时间间隔结束时自动切换到下一个图片的轮播图

好的，以下是一个简单的轮播图实现，每隔3秒钟自动切换到下一张图片：

HTML 代码：

<div class="carousel">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS 代码：

.carousel img {
  display: none;
  width: 100%;
  height: auto;
}

.carousel img.active {
  display: block;
}

JavaScript 代码：

var images = document.querySelectorAll('.carousel img');
var currentIndex = 0;

setInterval(function() {
  images[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % images.length;
  images[currentIndex].classList.add('active');
}, 3000);

解释说明：

首先，我们使用 CSS 将所有图片隐藏，只显示当前激活的图片，并在该图片上添加一个 `.active` 类。JavaScript 代码中，我们使用 `document.querySelectorAll()` 方法获取所有图片元素，并将当前索引 `currentIndex` 初始化为 0。然后，我们使用 `setInterval()` 方法设置一个每隔 3 秒钟执行一次的定时器，其中每次定时器触发时，我们将当前激活的图片移除 `.active` 类，将当前索引 `currentIndex` 加一并取模，然后将下一张图片添加 `.active` 类，完成轮播图的切换。