javascript实现图片轮播

可以通过以下代码实现Javascript图片轮播：

HTML:

<div id="slider">
  <img class="sliderImg" src="img1.jpg">
  <img class="sliderImg" src="img2.jpg">
  <img class="sliderImg" src="img3.jpg">
</div>

CSS:

#slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.sliderImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.sliderImg.active {
  opacity: 1;
}

Javascript:

var sliderIndex = 0;
var sliderImages = document.querySelectorAll(".sliderImg");
var sliderInterval = setInterval(nextSlide, 3000);

function nextSlide() {
  sliderIndex++;
  if (sliderIndex >= sliderImages.length) {
    sliderIndex = 0;
  }
  for (var i = 0; i < sliderImages.length; i++) {
    sliderImages[i].classList.remove("active");
  }
  sliderImages[sliderIndex].classList.add("active");
}

首先，我们在HTML中定义了一个包含三张图片的div，每张图片都有一个类名为“sliderImg”。

接下来，我们在CSS中设置了“slider” div的宽度、高度和overflow属性，并将每张图片的position设置为absolute，top和left设置为0，以便它们都居中并重叠在一起。我们还为每张图片设置了一个opacity属性，以便在切换图片时进行渐变效果。

最后，在Javascript中，我们定义了一个sliderIndex变量，它将跟踪我们当前显示的图片。我们还定义了一个sliderImages变量，它是一个包含所有图片元素的数组。我们使用setInterval函数设置一个间隔时间，以便每隔3秒调用nextSlide函数。在nextSlide函数中，我们将sliderIndex增加1，以便显示下一张图片。如果sliderIndex的值大于或等于图片数量，我们将其重置为0。我们使用一个循环来删除所有图片的“active”类，并将其添加到当前显示的图片。这将触发我们在CSS中定义的渐变效果，并显示新的图片。