javascript自动轮播图代码

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

HTML 代码：

<div class="slider">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
</div>

CSS 代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.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 slideIndex = 0;
var slides = document.querySelectorAll('.slider img');
var timer;

function showSlides() {
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  slides[slideIndex-1].classList.add('active');
  timer = setTimeout(showSlides, 3000);
}

showSlides();

这个代码使用了一个计时器来每隔 3 秒钟切换图片。`showSlides` 函数会递增 `slideIndex`，并且根据 `slideIndex` 切换图片。如果 `slideIndex` 大于图片数量，则将其重置为1。在 `showSlides` 函数中，我们还使用了一个 `setTimeout` 函数来每隔 3 秒钟自动调用 `showSlides` 函数。