滚动轮播

滚动轮播：
首先缓存所需要的节点

var $imgCt = $('.carousel .img_ct'),
    $imgs = $('.carousel .img_ct >li'),
    $preBtn = $('.carousel .pre'),
    $nextBtn = $('.carousel .next'),
    $bullets = $('.carousel .bullet li');

设置显示的第一张图片的下标为0，移动状态为false,

var pageIndex = 0;
var isAnimate = false;   //设置移动状态

然后在在尾部克隆第一张图片，第一张图片之前克隆最后一张图片，但是css要往左移动一张图片的宽度，这样在控制台看到的就是6张图片，但是显示的还是第一张图片。假如之前的下表示[0,1,2,3]那现在的下边就是[3,0,1,2,3,0]，这样做的目的就是，当图片点击到第4张，继续往下点击时，就会显示第一张照片。

image.png

有一点要注意的是：一开始就要var $imgs = $('.carousel .img_ct >li'),这样相当于做了次缓存，即时前后都克隆了一份，但是imgs还是只有4个

image.png

image.png

·如图所示，当页面显示的时候，出现的是第一张图片，点击next，就出现到下一张，

image.png

其实做的就是，当我页面跳转，在第四张图片的时候，下一站，出现的就是第一张图片，但是index迅速换了，所以，

function () {
  pageIndex -= len;
  if(pageIndex < 0 ){
  pageIndex = imgCount - 1;
  $imgCt.css({left: -imgCount*imgWidth})
}
function () {
  pageIndex += len
  if(pageIndex === imgCount){
  pageIndex = 0;
  $imgCt.css({left: -imgWidth})
  }

这样，假如在下标为3的图片（最后一张），点击下一张，显示的就是下标0的图片（第一张）。
其实可以这么看，去掉overflow:hidden,页面显示的

image.png

点击下一张，页面立刻跳转

image.png

demo