html jQuery实现图片轮播的代码

很简单，你可以使用以下代码：

HTML：

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

CSS：

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

jQuery：

$(document).ready(function() {
  $(".slider img:first-child").addClass("active");
  setInterval(function() {
    var current = $(".slider img.active");
    var next = current.next();
    if (!next.length) {
      next = $(".slider img:first-child");
    }
    current.removeClass("active");
    next.addClass("active");
  }, 3000);
});

以上代码可以实现一个图片轮播效果，每隔3秒钟自动切换下一张图片。希望能对你有所帮助！