jquery轮播图实现简单代码

以下是一个简单的 jQuery 轮播图代码示例：

HTML 代码：

<div class="slider">
  <div class="slider-wrapper">
    <div class="slider-slide">
      <img src="image1.jpg">
    </div>
    <div class="slider-slide">
      <img src="image2.jpg">
    </div>
    <div class="slider-slide">
      <img src="image3.jpg">
    </div>
  </div>
  <div class="slider-nav">
    <a href="#" class="slider-prev">Prev</a>
    <a href="#" class="slider-next">Next</a>
  </div>
</div>

CSS 代码：

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

.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.slider-slide:first-child {
  display: block;
}

.slider-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-nav a {
  display: inline-block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

.slider-nav a:hover {
  background-color: #666;
}

jQuery 代码：

$(function() {
  var $slides = $('.slider-slide');
  var $wrapper = $('.slider-wrapper');
  var slideCount = $slides.length;
  var currentIndex = 0;

  function showSlide(index) {
    $slides.eq(currentIndex).fadeOut();
    $slides.eq(index).fadeIn();
    currentIndex = index;
  }

  $('.slider-prev').click(function(e) {
    e.preventDefault();
    var index = (currentIndex === 0) ? slideCount - 1 : currentIndex - 1;
    showSlide(index);
  });

  $('.slider-next').click(function(e) {
    e.preventDefault();
    var index = (currentIndex === slideCount - 1) ? 0 : currentIndex + 1;
    showSlide(index);
  });
});

此代码示例包括 HTML、CSS 和 jQuery 代码，创建了一个带有左右箭头的简单轮播图。它使用了 jQuery 的 `fadeOut()` 和 `fadeIn()` 方法来实现图片的淡入淡出效果。