项目中轮播图总结

window.onload=function () {
 
    var items=document.getElementsByClassName("item");                      此时获得图片，成为一个集合
    var alist=document.getElementById("alist").getElementsByTagName("a");   此时获得圆点，作为切换图片的按钮
    var lbtn=document.getElementById("lbtn");获得左侧的按钮
    var rbtn=document.getElementById("rbtn");获得右侧的按钮

    var index=0;                             声明一个变量index，作为索引，默认为0

    var clearactive=function () {
        for (var m=0;m<items.length;m++){
            items[m].className="item";   此时将所有图片的class值修改为“item”，全部恢复原样式
        }
        for (var m=0;m<alist.length;m++){
           alist[m].className="ali"      此时将所有的圆点的class值修改为“ali”，恢复原样式

    } }; 

var goindex=function () {                  
    clearactive();
    items[index].className="item active";           调用上面的clearactive（）函数，并且同时将图片和圆点的class值增加avtive和activea                                           

    alist[index].className="ali activea"            
};                                                  

var gonext=function () {                             声明一个gonext方法，并且判断index的值，此时将index的值锁定在4和0之间，如果index等于5，
    if (index<4){                                    则index=0，此时图片又跳转到第0张。
        index ++;
    }else{
        index=0
    }
    goindex()
};

var goup=function(){
    if (index==0){                                   判断index，如果index=0时，则执行index=4，如果index不等于0，则index继续自减
        index=4;                                     
    }else{
        index--
    }
    goindex()
};


rbtn.onclick=function () {                           右侧按钮执行gonext（）方法
    gonext();

};

lbtn.onclick=function(){                              左侧按钮执行goup（）方法
    goup()
};


setInterval(function () {                            此处添加一个定时器，设为两个参数，第一个参数为匿名函数，第二个是时间，并调用gonext（）方法，每6秒执行一次
    gonext()
},6000);