html轮播图循环播放

要实现HTML轮播图的循环播放，可以使用JavaScript编写代码来实现。以下是一个简单的实现方式：

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: 500px;
}

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

.slider img.active {
  opacity: 1;
}

JavaScript部分：

// 获取图片列表
var slides = document.querySelectorAll('.slider img');

// 初始化当前图片的索引为0
var currentSlide = 0;

// 每隔3秒切换图片
var slideInterval = setInterval(nextSlide, 3000);

function nextSlide() {
  // 隐藏当前图片
  slides[currentSlide].classList.remove('active');
  
  // 增加当前图片的索引
  currentSlide = (currentSlide + 1) % slides.length;
  
  // 显示下一张图片
  slides[currentSlide].classList.add('active');
}

以上代码将会轮流显示图片列表中的每一个图片，每隔3秒钟切换一次。你可以根据需要对CSS样式进行调整，例如更改图片的宽度和高度，修改轮播间隔时间等。