写一段轮播的代码

以下是一个简单的轮播代码：

HTML：

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

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

.slider img.active {
  opacity: 1;
}

JavaScript：

var images = document.querySelectorAll('.slider img');
var currentImage = 0;

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

上面的代码实现了一个简单的轮播，每隔3秒钟自动切换到下一张图片。当切换到下一张图片时，它会淡入，而当前显示的图片则会淡出。轮播的实现依靠了 JavaScript 的 setInterval 函数和 CSS 的 transition 属性。