初识轮播

Carousel

把向前一张，向后一张和跳转到某张这样的功能都集成到play里（设定一个Method），根据传入的参数进行类型判断从而决定使用什么功能（类似重载）。

• 需要一个拼接函数，对图片组进行加工。
• 需要一个预览图同步跟踪函数

一些注意点：
-索引循环问题: 滑动型：if判断重置
-渐变型：利用%计算的循环特性
-多次点击问题: 触发时加锁，动效完毕后回调开锁。
-自动播放下点击打断定时问题： 触发主动跳转时先清除计时器，动效完毕后回调创建新的自轮播定时器。

---

渐变

<pre>`
<script>
var $ct = $('.img-ct'), //容器
$img = $('.img-ct >li'), //li
$leftBtn = $('.turnLeft'),
$rightBtn = $('.turnRight'),
$bottomBtn = $('.bullet'),
imgWidth = $img.width(),
imgLen = $img.length,
pageIndex = 0;
lock = false;
clock = true;

    $rightBtn.on('click',function(e) {
        e.preventDefault()
        rightBtn()
    })

    $leftBtn.on('click', function(e) {
        e.preventDefault()
        leftBtn()
    })

    $bottomBtn.find('li').on('click',function(e) {
        e.preventDefault;
        var idx = $(this).index()
        show(idx)
    })

    function show(idxArg) {
        if (lock) return;
        lock = true;
        $img.eq(pageIndex).fadeOut(500);
        $img.eq(idxArg).fadeIn(1000,function(){
            lock = false;
        })
        pageIndex = idxArg
        checked()
    }
    
    function checked() {
        $bottomBtn.children().removeClass('active')
            .eq(pageIndex).addClass('active')
    }

    function leftBtn() {
        show((imgLen + pageIndex-1)%imgLen)
    }

    function rightBtn() {
        show((pageIndex+1)%imgLen)
    }
    
    $('.carousel').hover(
        function(){
            clock = false
        },
        function(){
            clock = true;
    })

    setInterval(function(){
        if(clock){
            rightBtn()
        }
    },2000)

</script>
`</pre>

---

左右轮播

<pre>`
<script>
//注意～当把一个Dom节点缓存一起来之后（var），如果文档动态发生改变之后
//这些变量上不变的！
var $imgCt = $('.img-ct') //容器
var $imgs = $('.carousel .img-ct >li') //初始容器li
var $leftBtn = $('.turnLeft') //按键左
var $rightBtn = $('.turnRight') //按键右
var $bullets = $('.bullet li') //index键
var lock = false; //多触发锁～
var pageIndex = 0 //页面基点

    var imgCount = $imgs.length             //初始图片的数量 => 4
    var imgWidth = $imgs.width()            //初始图片的宽度 => 300
    $imgCt.append($imgs.first().clone())    //克隆增至ul尾部
    $imgCt.prepend($imgs.last().clone())    //克隆增至ul头部
    $imgCt.width((imgCount + 2) * imgWidth) //容器的css宽度不能写！防止后续增加图片
    $imgCt.css({left: -imgWidth})           //容器的css向左前进 300

    $leftBtn.click(function() {             //点击触发滚左函数
        turnLeft(1)
    })
    $rightBtn.click(function(){             //点击出发滚右函数
        turnRight(1)
    })

    $bullets.click(function() {             //点击index键触发
        var index = $(this).index()         //下标基点 为点击的index
        if (index > pageIndex) {            //如下标基点值 大于 页面基点
            turnRight(index - pageIndex)    //触发滚右函数 （滚动量）
        } else if (index < pageIndex){      //否则.如小于 页面基点值
            turnLeft(pageIndex-index)        //触发滚左！
        }
    })

    function turnRight(btnNum) {            //滚右按键
        if (lock) return;
        lock = true;
        $imgCt.animate({                    //容器动画
            left: "-=" + btnNum * imgWidth  //滚动量
        },function() {                      //
            pageIndex += btnNum             //
            if (pageIndex === imgCount) {   //如果基点&数量一致
                pageIndex = 0               //初始重载页面基点
                $imgCt.css({left: -imgWidth})//容器css滚左
            }
        setBullet()                         //触发下标键被选样色
        lock = false;
        })
    }
    function turnLeft(btnNum) {             //滚左函数
        if (lock) return;
        lock = true;                        //锁上
        $imgCt.animate({                    //动画
            left: "+=" + btnNum * imgWidth  //滚右（可想象成一颗球，球滚右边，你看到就上显现出来的左部分）
        },function() {  
            pageIndex -= btnNum;            //
            if (pageIndex < 0){             //如等页基点等于-1，（最后一页）
                pageIndex = imgCount-1      //
                $imgCt.css({left:-imgCount*imgWidth})
            }
        setBullet()
        lock = false;                       //解锁
        })
    }
    function setBullet() {                  //选择删C增C
        $bullets.removeClass('active')
            .eq(pageIndex)
            .addClass('active')
    }

    setInterval(function(){                 //定时
        turnRight(1)
    },3000)
</script>

`</pre>

滚动轮播
渐进轮播