滚动轮播：
首先缓存所需要的节点
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
但是，直接
$('.carousel .img_ct >li'),就会显示出6个；
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
