jquery实现轮播图三张图片

以下是一个使用 jQuery 实现轮播图的例子，包含三张图片：

HTML 代码：

<div id="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.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 代码：

$(document).ready(function() {
  var currentIndex = 0;
  var items = $('#slider img');
  var itemAmount = items.length;

  function cycleItems() {
    var item = $('#slider img').eq(currentIndex);
    items.removeClass('active');
    item.addClass('active');
  }

  var autoSlide = setInterval(function() {
    currentIndex += 1;
    if (currentIndex > itemAmount - 1) {
      currentIndex = 0;
    }
    cycleItems();
  }, 3000);
});

这个例子使用了 jQuery 的 `eq()` 函数来选择当前轮播图，然后使用 `addClass()` 函数添加 `active` 类来显示当前轮播图。还使用了 `setInterval()` 函数来实现自动轮播。