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

好的，下面是使用jQuery的方法实现轮播图的代码：

HTML代码：

<div class="slider">
  <ul class="slider-list">
    <li class="slider-item"><img src="image1.jpg" alt="image1"></li>
    <li class="slider-item"><img src="image2.jpg" alt="image2"></li>
    <li class="slider-item"><img src="image3.jpg" alt="image3"></li>
  </ul>
  <div class="slider-nav">
    <span class="slider-prev">&lt;</span>
    <span class="slider-next">&gt;</span>
    <ul class="slider-dots">
      <li class="slider-dot"></li>
      <li class="slider-dot"></li>
      <li class="slider-dot"></li>
    </ul>
  </div>
</div>

CSS代码：

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

.slider-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 1800px;
}

.slider-item {
  float: left;
  width: 600px;
  height: 400px;
}

.slider-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
}

.slider-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  margin-left: -30px;
  width: 60px;
  height: 10px;
  list-style: none;
  text-align: center;
}

.slider-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #f00;
}

JavaScript代码：

$(function() {
  var $slider = $('.slider');
  var $sliderList = $('.slider-list');
  var $sliderItems = $('.slider-item');
  var $sliderNav = $('.slider-nav');
  var $sliderPrev = $('.slider-prev');
  var $sliderNext = $('.slider-next');
  var $sliderDots = $('.slider-dot');
  var currentIndex = 0;
  var timer;

  // 初始化轮播图
  function init() {
    // 将第一张图片复制到最后一张，将最后一张图片复制到第一张
    $sliderList.append($sliderItems.first().clone());
    $sliderList.prepend($sliderItems.last().clone());

    // 设置轮播图列表的宽度和位置
    $sliderList.css({
      width: $sliderItems.length * 100 + '%',
      left: '-100%'
    });

    // 设置轮播图项的宽度
    $sliderItems.css('width', 100 / $sliderItems.length + '%');

    // 设置轮播图导航点的位置
    $sliderDots.eq(currentIndex).addClass('active');
    $sliderDots.on('click', function() {
      var index = $(this).index();
      goto(index);
    });

    // 鼠标停留时显示左右切换的按钮
    $slider.hover(function() {
      $sliderNav.show();
      clearInterval(timer);
    }, function() {
      $sliderNav.hide();
      autoPlay();
    });

    // 点击左右按钮可以切换到上一幅或下一幅图
    $sliderPrev.on('click', function() {
      prev();
    });
    $sliderNext.on('click', function() {
      next();
    });

    // 自动切换到下一幅图
    autoPlay();
  }

  // 自动切换到下一幅图
  function autoPlay() {
    timer = setInterval(function() {
      next();
    }, 3000);
  }

  // 切换到上一幅图
  function prev() {
    currentIndex--;
    $sliderList.animate({
      left: '+=' + 100 + '%'
    }, 500, function() {
      if (currentIndex === -1) {
        currentIndex = $sliderItems.length - 1;
        $sliderList.css('left', -currentIndex * 100 + '%');
      }
      $sliderDots.eq(currentIndex).addClass('active').siblings().removeClass('active');
    });
  }

  // 切换到下一幅图
  function next() {
    currentIndex++;
    $sliderList.animate({
      left: '-=' + 100 + '%'
    }, 500, function() {
      if (currentIndex === $sliderItems.length) {
        currentIndex = 0;
        $sliderList.css('left', '-100%');
      }
      $sliderDots.eq(currentIndex).addClass('active').siblings().removeClass('active');
    });
  }

  // 切换到指定的图
  function goto(index) {
    currentIndex = index;
    $sliderList.animate({
      left: -currentIndex * 100 + '%'
    }, 500);
    $sliderDots.eq(currentIndex).addClass('active').siblings().removeClass('active');
  }

  init();
});