轮播

函数调用的的方法：

1，c()

2.c就是函数默认提供的方法、函数；

3.c.apply（），apply是改变 this（当前的值）如果c未定义，那么this的默认是window

1，全局变量(信号量)
2，排他模型
  （1）全变黄
 （2）当前显示的变红```

呼吸轮播图的思路：
1，透明底切换
animate(物体，{"opacity":1},1000)不透明；
animate(物体，{"opacity":0},1000)透明；

传统轮播图的js的步骤：

//得到元素
        var carousel = document.getElementById("carousel");
        var leftBtn = document.getElementById("leftBtn");
        var rightBtn = document.getElementById("rightBtn");
        var circles = document.getElementById("circles");
        var m_unit = document.getElementById("m_unit");
        var imageUL = m_unit.getElementsByTagName("ul")[0];
        var imageLis = imageUL.getElementsByTagName("li");
        var circlesLis = circles.getElementsByTagName("li");
        //克隆前我们得到个数
        var length = imageLis.length;
        //魔术的准备就是克隆第一张li，放到最后
        imageUL.appendChild(imageLis[0].cloneNode(true));
        //信号量```
        var idx = 0;```
        //自动轮播```
        var timer = setInterval(rightBtnHandler,options.interval);```
        //鼠标进入停止，离开继续

    carousel.onmouseover = function(){
        clearInterval(timer);
    }
    carousel.onmouseout = function(){
        timer = setInterval(rightBtnHandler,options.interval);
    }

        //监听

        rightBtn.onclick = rightBtnHandler;

        //右按钮的事件处理函数

        function rightBtnHandler(){

            //函数截流

            if(m_unit.isanimated) return;

            //信号量的变化

            idx++;

            //改变小圆点

            changeCircles();

            //运动机构的移动

            animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween,function(){
                if(idx > length - 1){
                    idx = 0;
                    m_unit.style.left = "0px";
                }
            });
        }

        //监听

        leftBtn.onclick = function(){
            //函数截流

            if(m_unit.isanimated) return;
            //信号量的变化
            idx--;
            if(idx < 0){
                idx = length - 1;
                m_unit.style.left = -options.width * length + "px";
            }

            //改变小圆点

            changeCircles();
            
            animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween);
        }

        //小圆点的监听

        for (var i = 0; i < circlesLis.length; i++) {
            circlesLis[i].index = i;
            circlesLis[i].onclick = function(){
                //信号量就是自己的序号
                idx = this.index;
                //拉动
                animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween);
                //改变小圆点
                changeCircles();
            }
        }
        //根据信号量设置小圆点

    function changeCircles(){
        //idx可能是5，但是我们的小圆点下标最大是4，所以用n过渡一下：
        var n = idx > length - 1 ? 0 : idx;
        //排他
        for (var i = 0; i < circlesLis.length; i++) {
            circlesLis[i].className = "";
        }
        circlesLis[n].className = "cur";
    }
</script>

间隙轮播：

// 测试下是否会提交！
        //得到所有元素

    var ul = document.getElementsByTagName("ul")[0];
    var lis = document.getElementsByTagName("li");
    var length = lis.length;
    //复制所有li，追加到ul里
    ul.innerHTML += ul.innerHTML;
    //信号量
    var idx = 0;
    //模拟右按钮的业务
    function move(){
        idx++;
        // ul -> elem
        //  callback   elem -> this
        //  ul -> this
        animate(ul,{"top":-40 * idx},800,function(){
            if(idx > length - 1){
                idx = 0;
                this.style.top = "0px";
            }
        });
    }
```
    //调用动画函数的间隔时间，要远大于动画运行时间
    //这时就给人感觉一个间歇的过程

        setInterval(move, 1800);
        
    </script>