轮播图

简单的轮播图

first：通过DOM 获取到html中的元素

var oBanner = document.getElementById("banner");            //   图片的ul元素
var aImg = oBanner.getElementsByTagName("li");               //   放图片的li元素
var oSpots = document.getElementById("spots");                //   小圆点的ul元素 
var aSpot = oSpots.getElementsByTagName("li");               //   小圆点的li元素
var oLeftClick = document.getElementById("leftClick");      //  左侧点击切换元素
var oRightClick = document.getElementById("rightClick");   //  右侧点击切换元素

second：定义一个对象，配置需要改变的量

var odj = {
     "interval": 2000,           //  轮播时间间隔
     "animatetime": 600,     //  运动总时间
     "tween": "QuadEaseOut",       //  缓冲运动执行函数 （二次的）
     "width": 560,      //  图片宽度（根据轮播图片实际宽度进行设置）
}

third：将第一张图片复制，放在轮播图片后面（使图片切换到最后一张时，可以做到无缝切换）

 oBanner.appendChild( aImg[0].cloneNode(true) );     

【注】cloneNode 是DOM对象，系统默认提供的方法/函数，作用是复制克隆节点
cloneNode（deep） 参数deep，默认为false；设置为true，复制其节点和属性，及其后代；设置为false，只克隆其节点及后代（不克隆属性）。

fourth：小圆点的监听，点击圆点图片切换，圆点属性改变

var idx = 0;    //  设置信号量
for(var i = 0; i < aSpot.length; i++){
     aSpot[i].index = i;      //  存储i的值
     aSpot[i].onclick = function(){
          idx = this.index;     //  将存储的序号赋值给信号量（信号量就是自己的序号）
          animate(oBanner,{"left" : -obj.width * idx},obj.animatetime,obj.tween);
          changeSpot();   //  改变小圆点
     }
}

【注】aSpot[i].index = i; 因为点击事件是在for循环执行结束后执行的，所以需要保存每次执行的i的值，否则i为最大值（ aSpot.length）。
【注】 animate(oBanner,{"left" : -obj.width * idx},obj.animatetime,obj.tween);调用封装的动画函数，参数oBanner：运动的物体；参数" left "：改变的属性；-obj.width * idx：图片向左移动所以为负值，obj.width的值为560（图片宽度）* idx（信号量）计算每次向左移动的值；obj.tween：变换的缓冲函数。

fifth：根据信号量设置小圆点（函数）

function changeSpot(){
    var n = idx > aSpot.length - 1 ? 0 : idx;      //  判断信号量的值，使它循环播放  
    for(var j = 0; j < aSpot.length; j++){    //  排它法
        aSpot[j].className = "";      //  先将所以点的class样式去除
    }
    aSpot[n].className = "currentSpot";    //  设置当前点的样式
}

【注】var n = idx > aSpot.length - 1 ? 0 : idx; 三目运算书写格式（当 idx > aSpot.length - 1的值为true时，执行0；当 idx > aSpot.length - 1的值为false时，执行idx）。

sixth：左右侧按钮点击实现图片切换

右侧按钮点击图片向左切换效果

//监听
oRightClick.onclick = rightBtnHandler;
function rightBtnHandler(){        //右按钮的事件处理函数
    if(oBanner.isanimated) return;       //函数截流     
      idx++;        //信号量的变化    
      changeSpot();         //改变小圆点
        //运动机构的移动
      animate(oBanner,{"left" : -obj.width * idx},obj.animatetime,obj.tween,function(){
        if(idx > length - 1){           // 回调函数
          idx = 0;
          m_unit.style.left = "0px";
        }
      });
}

【注】函数节流： 为了解决动画没有完成就执行下一次的问题； if 执行语句如果只有一条，可以不加大括号（例： if(oBanner.isanimated) return; ）。

左侧按钮点击图片向右切换效果

leftBtn.onclick = function(){         //监听
    if(m_unit.isanimated) return;      //函数截流
        idx--;
        if(idx < 0){
            idx = length - 1;
            oBanner.style.left = -obj.width * aSpot.length + "px";   //  变为最后一张图片
        }
    changeSpot();          //改变小圆点
    animate(oBanner,{"left" : -obj.width * idx},obj.animatetime,obj.tween);
}

seventh：自动轮播效果、鼠标移动事件

var timer = setInterval(rightBtnHandler,obj.interval);       //  自动轮播
    oBox.onmouseover = function(){        //鼠标进入停止，离开继续
        clearInterval(timer);
    }
    oBox.onmouseout = function(){
        timer = setInterval(rightBtnHandler,obj.interval);
    }