用js写一个图片轮播代码

以下是使用JavaScript编写的简单图片轮播代码：

HTML:

<div class="slider">
  <img src="img1.jpg" alt="image1">
  <img src="img2.jpg" alt="image2">
  <img src="img3.jpg" alt="image3">
</div>

CSS:

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

.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:

const images = document.querySelectorAll('.slider img');
let index = 0;

function changeImage() {
  images[index].classList.remove('active');
  index = (index + 1) % images.length;
  images[index].classList.add('active');
}

setInterval(changeImage, 3000);

在上面的代码中，我们首先使用CSS将所有图片定位在相同位置，并通过opacity属性将它们隐藏。我们还为当前显示的图片添加了一个“active”类来显示它。在JavaScript中，我们使用setInterval函数来每隔三秒调用changeImage函数。changeImage函数首先删除当前显示图片的“active”类，然后将index变量递增，以便下一张图片成为当前显示的图片，并将其添加到“active”类中。最后，我们使用模运算符确保index在0到图片数量之间循环。