jQuery轮播图

需求：使图片能够进行轮播滚动，到最后一张图片时返回第一张(或第一张向前到最后一张)。
思路：在两端的图片前后添加一个虚拟镜像，当切换到镜像时，返回到所对应的真实图片。

---

方案：
1.通过浮动或绝对定位使图片水平排列。
2.页面打开后将图片的第一张与最后一张的克隆镜像分别放到最后一张的后面和第一张的前面。

4556297-59bd3bb5a755a919.png

$imgCt.append($img.first().clone());
$imgCt.prepend($img.last().clone());

3.当点击翻页按钮时，将图片整体向左（右）移动图片宽度的距离，并且对当前显示的图片位置进行判断，当移动到镜像位置时将镜像位置替换为实际图片位置。

function prePage(len){
  if(isAnimate) return;
  isAnimate = true;
  $imgCt.animate({
    left: "+=" + len*imgWidth
  }, 150, function(){
    pageIndex -= len;
    if(pageIndex < 0){
      pageIndex = imgCount - 1;
      $imgCt.css("left", -imgCount*imgWidth);
    }
    console.log(pageIndex);
    setBullet();
    isAnimate = false;
  });
}

function nextPage(len){
  if(isAnimate) return;
  isAnimate = true;
  $imgCt.animate({
    left: "-=" + len*imgWidth
  }, 150, function(){
    pageIndex += len;
    if(pageIndex === imgCount){
      pageIndex = 0;
      $imgCt.css("left", -imgWidth);
    }
    console.log(pageIndex);
    setBullet();
    isAnimate = false;
  });
}

4.当图片移动时，在图片下方的页码也随之改变，并且对每一个页码绑定点击事件，当点击页码时，跳转到对应的图片。

$bullets.click(function(){
  var index = $(this).index();
  if(index > pageIndex){
    nextPage(index - pageIndex);
  } else if (index < pageIndex){
    prePage(pageIndex - index);
  }
});

5.优化：当翻页动画未完成时，多次点击翻页，会使程序出错。
每次点击时进行判断，动画完成前的点击无效。