轮播

** 1、 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）**####

轮播实现原理：
1.将图片排成一行；
2.创建一个可视化窗口，窗口之外的区域隐藏；
3.在第一张图片的前面克隆最后一个图片元素，在最后一个图片后面克隆第一个元素；
4.利用jQuery动画以及定位就能实现无限循环的轮播；
我们可以抽象出来的代码有很多，比如antoPlay()、playNext()、playPre()
（比如play）

实现一个play(index)函数
传入要显示的图片页数
function play(index){
if(curPageIndex === index){
    return;
}
if(isAnimate) return;
isAnimate = true;
$imgCt.animate({
    left: '+=' + (curPageIndex - index) * $firstImg.width()
}, function(){
    curPageIndex = index;
    if(curPageIndex === imgLength){
        $imgCt.css({
            left: - $firstImg.width()
        })
        curPageIndex = 0;
    }
    else if(curPageIndex === -1){
        $imgCt.css({
            left: - $firstImg.width() * imgLength
        })
        curPageIndex = imgLength -1 ;
    } 
    isAnimate = false;
})
}

轮播的基本原理是先并列要轮播的东西，然后设置为不可见或在可见区域之外，最后按顺序使之可见或者移放至可见区域之内。以上就是核心代码的思想，可封装为一个函数。

**2、 实现视频中的左右滚动无限循环轮播效果 **####

代码
预览

**3、 实现一个渐变轮播效果 **####

代码
预览