用js代码实现图片自动轮播

以下是一个简单的基于 JavaScript 实现图片自动轮播的示例代码：

HTML 代码：

<div class="slideshow-container">
  <img src="img1.jpg" class="mySlides">
  <img src="img2.jpg" class="mySlides">
  <img src="img3.jpg" class="mySlides">
</div>

CSS 代码：

.mySlides {
  display: none;
}

JavaScript 代码：

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, 3000); // 切换间隔时间为 3 秒
}

上述代码中，`slideIndex` 变量用于记录当前显示的图片索引，`showSlides()` 函数用于切换图片，该函数每隔 3 秒自动调用一次。在该函数中，通过 `getElementsByClassName()` 方法获取到所有的图片元素，然后将它们的 `display` 属性设置为 `none`，表示隐藏起来。接着将 `slideIndex` 变量加 1，如果 `slideIndex` 超过了图片元素的数量，就将其设置为 1。最后，将当前的图片元素的 `display` 属性设置为 `block`，表示显示出来。