jquery拼图轮播

以下是一个基于jQuery的拼图轮播的实现方法：

HTML代码：

<div class="slider">
  <div class="slider-wrapper">
    <div class="slider-item"><img src="image1.jpg"></div>
    <div class="slider-item"><img src="image2.jpg"></div>
    <div class="slider-item"><img src="image3.jpg"></div>
    <div class="slider-item"><img src="image4.jpg"></div>
  </div>
  <div class="slider-dots">
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

CSS代码：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 2400px;
  height: 400px;
}
.slider-item {
  float: left;
  width: 600px;
  height: 400px;
}
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.slider-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}
.slider-dot.slider-dot-active {
  background-color: #fff;
}

JavaScript代码：

$(function() {
  var $slider = $('.slider');
  var $wrapper = $slider.find('.slider-wrapper');
  var $items = $slider.find('.slider-item');
  var $dots = $slider.find('.slider-dot');
  var len = $items.length;
  var index = 0;
  var timer = null;

  // 初始化
  $wrapper.css('width', len * 100 + '%');
  $items.css('width', 100 / len + '%');
  $dots.eq(index).addClass('slider-dot-active');

  // 自动轮播
  function autoPlay() {
    timer = setInterval(function() {
      index++;
      if (index >= len) {
        index = 0;
      }
      play();
    }, 3000);
  }
  autoPlay();

  // 播放
  function play() {
    $wrapper.animate({
      left: -index * 100 + '%'
    }, 500);
    $dots.eq(index).addClass('slider-dot-active').siblings().removeClass('slider-dot-active');
  }

  // 鼠标悬停
  $slider.hover(function() {
    clearInterval(timer);
  }, function() {
    autoPlay();
  });

  // 圆点点击
  $dots.click(function() {
    index = $(this).index();
    play();
  });
});