用js代码实现轮播图效果

好的，以下是一个简单的用 JavaScript 实现轮播图效果的代码：

HTML 代码：

<div class="slideshow-container">
  <div class="slide">
    <img src="image1.jpg">
  </div>
  <div class="slide">
    <img src="image2.jpg">
  </div>
  <div class="slide">
    <img src="image3.jpg">
  </div>
</div>

CSS 代码：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

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

.slide.active {
  opacity: 1;
}

JavaScript 代码：

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

这段代码会在页面加载后自动开始轮播，每 5 秒钟切换一张图片。你可以根据需要修改图片的数量、切换时间等参数。