js轮播图代码

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

HTML 代码：

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

CSS 代码：

#slideshow {
  position: relative;
  width: 500px;
  height: 300px;
}

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

#slideshow img.active {
  opacity: 1;
}

JavaScript 代码：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementById("slideshow").getElementsByTagName("img");
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex-1].classList.add("active");
  setTimeout(showSlides, 3000); // 切换间隔
}

这段代码会将 `#slideshow` 元素内的图片轮流显示，每张图片的显示时间为 3 秒。可以根据需要修改切换间隔和样式。