使用jQuery的方法实现轮播图。实现的轮播图最少由3幅图组成，每隔一段时间自动切换到下一幅图；鼠标停留时显示左右切换的按钮，点击左右按钮可以切换到上一幅或下一幅图；点击图下面的圆形下标，切换到对应的图。图片切换需无缝切换，首尾图片切换时无违和感 。

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

HTML代码：

<div class="slider">
  <ul class="slider-list">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
  <div class="slider-nav">
    <a class="prev" href="#">Prev</a>
    <ul class="dots">
      <li class="active"></li>
      <li></li>
      <li></li>
    </ul>
    <a class="next" href="#">Next</a>
  </div>
</div>

CSS代码：

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

.slider-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 2400px;
  height: 400px;
  left: 0;
  transition: left 0.5s ease-in-out;
}

.slider-list li {
  float: left;
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

.slider-nav a {
  display: inline-block;
  margin: 0 10px;
  padding: 5px 10px;
  background: #ccc;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  border-radius: 20px;
}

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

.dots {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

.dots li.active {
  background: #333;
}

jQuery代码：

$(function() {
  var $slider = $('.slider');
  var $sliderList = $('.slider-list');
  var $sliderItem = $('.slider-list li');
  var $prevBtn = $('.prev');
  var $nextBtn = $('.next');
  var $dots = $('.dots li');
  var currentIndex = 0;
  var itemWidth = $slider.width();
  var timer;

  // 初始化轮播图
  function initSlider() {
    // 将最后一张图放到第一张前面
    $sliderList.prepend($sliderItem.last().clone());
    // 将第一张图放到最后一张后面
    $sliderList.append($sliderItem.first().clone());
    // 设置轮播图的宽度
    $sliderList.width(itemWidth * ($sliderItem.length + 2));
    // 将轮播图定位到第一张图的位置
    $sliderList.css('left', -itemWidth);
    // 显示当前图标为第一张图
    $dots.eq(0).addClass('active');
  }

  // 自动切换到下一张图
  function autoPlay() {
    timer = setInterval(function() {
      currentIndex++;
      if (currentIndex >= $sliderItem.length) {
        currentIndex = 0;
      }
      goTo(currentIndex);
    }, 2000);
  }

  // 切换到指定的图
  function goTo(index) {
    $sliderList.animate({
      left: -(index + 1) * itemWidth
    }, 500, function() {
      // 如果切换到最后一张图，将轮播图定位到第一张图的位置
      if (index >= $sliderItem.length - 1) {
        $sliderList.css('left', -itemWidth);
        currentIndex = 0;
      }
      // 如果切换到第一张图之前的那张图，将轮播图定位到最后一张图的位置
      if (index < 0) {
        $sliderList.css('left', -$sliderItem.length * itemWidth);
        currentIndex = $sliderItem.length - 1;
      }
      // 更新图标的状态
      $dots.removeClass('active');
      $dots.eq(currentIndex).addClass('active');
    });
  }

  // 点击图标切换到对应的图
  $dots.click(function() {
    var index = $(this).index();
    currentIndex = index;
    goTo(index);
    return false;
  });

  // 点击上一张按钮切换到上一张图
  $prevBtn.click(function() {
    currentIndex--;
    goTo(currentIndex);
    return false;
  });

  // 点击下一张按钮切换到下一张图
  $nextBtn.click(function() {
    currentIndex++;
    goTo(currentIndex);
    return false;
  });

  // 鼠标悬停时停止自动播放，显示左右切换按钮
  $slider.hover(function() {
    clearInterval(timer);
    $prevBtn.fadeIn();
    $nextBtn.fadeIn();
  }, function() {
    autoPlay();
    $prevBtn.fadeOut();
    $nextBtn.fadeOut();
  });

  // 初始化轮播图
  initSlider();
  // 自动切换到下一张图
  autoPlay();
});