自动轮播图html代码

以下是一个简单的自动轮播图的 HTML 代码示例：

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="image1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image3.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // 切换时间间隔为 2 秒
}

function plusSlides(n) {
  showSlides(slideIndex += n);
}
</script>

在这个例子中，轮播图的容器是一个 `<div>` 元素，里面包含了多个图片对应的 `<div class="mySlides">` 元素。`<a>` 元素则是用来切换到前/后一张图片的按钮。JavaScript 代码则实现了自动轮播的功能。