22.轮播

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}

body{
    font-family: "微软雅黑";
    color:#14191e;
}
.main{
    width: 1200px;
    height: 460px;
    margin:30px auto;
    overflow: hidden;
    position: relative;
}

.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
    position: relative;
}


.banner-slide{
    width: 1200px;
    height:460px;
    position: absolute;
    /*为了使三张图片重叠，使用绝对定位，并且是相对父元素的，因此.banner设置相对定位*/
    background-repeat: no-repeat;
    display:none;/*先使所有图片都隐藏，然后在不同情况下显示*/
}
.slide-active{
    display: block;
}

.slide1{
    background-image: url("../img/bg1.jpg");
}
.slide2{
    background-image: url("../img/bg2.jpg");
}
.slide3{
    background-image: url("../img/bg3.jpg");
    
}

.button{
    position: absolute;/*相对于main定位*/
    width: 40px;
    height: 80px;
    left:244px;/*菜单栏*/
    top:50%;/*main的高度一半，但由于设置了height:80px,因此需要设置margin-top*/
    margin-top:-40px;
    background: url(../img/arrow.png) no-repeat center center;/*水平和垂直都居中，background与background-image有什么区别？*/


}
.button:hover{
    background-color:#333;/*注意这里不用background，因为会.button的该属性冲突*/
    opacity:0.5;
    filter:alpha(opacity=50);/*兼容其它浏览器*/
}
.prev{
    transform: rotate(180deg);/*旋转*/
}
.next{
    left:auto;
    right:0px;/*因为.button 设置了left:244，现在直接设置right:0px,冲突，优先left，因此先设置left为auto，再设置right*/
}

.dots{
    position: absolute;
    right:20px;
    bottom: 24px;
    text-align: right;
}
.dots span{
    display: inline-block;/*这条非常重要，块状显示并排保持在同一行*/
    width: 12px;
    height:12px;
    line-height: 12px;/*居中对齐*/
    border-radius: 50%;
    background: rgba(7,17,27,0.4);/*同时设置了透明度*/
    /*描边*/
    box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset; 
    margin-left:8px;
    cursor: pointer;/*光标形状为手型*/
}

.dots span.active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background: #fff;
}

function byId(id){
    return typeof(id) === "string"?document.getElementById(id):id;//
    //==， 两边值类型不同的时候，要先进行类型转换，再比较。
    //====，不做类型转换，类型不同的一定不等。
}

var index = 0,
    timer = null;
    pics = byId("banner").getElementsByTagName("div"),
    dots = byId("dots").getElementsByTagName("span"),
    prev = byId("prev"),
    next = byId("next"),
    len = pics.length;

function slideImg(){
    var main = byId("main");
    //画过清除定时器，离开继续
    main.onmouseover = function(){
        //滑过清除定时器
        if(timer) clearInterval(timer);
    }
//调用onmouseout事件
    main.onmouseout = function(){
        /*setInterval使得一个函数每隔固定时间被调用一次*/
        /*setTimeout 超时定时器*/
        timer = setInterval(function(){
            index++;
            if(index >= len){
                index = 0;
            }
            console.log(index);
            //切换图片
            changeImg();
        },3000);    
    }
    //自动触发鼠标离开时间
    main.onmouseout();//调用onmouseout方法

    // 遍历所有点击，且绑定点击事件，点击圆点切换图片
    for(var d=0;d=len){
            index = 0;
        }
        changeImg();

    }
    //上一章
    prev.onclick = function(){
        index --;
        if(index <0){
            index = len - 1;
        }
        changeImg();
    }
}

//切换图片
function changeImg(){
    //pics[index].className = "slide-active";//这是重写类，直接设成了slide-active
    for(var i=0;i