js（setInterval）定时器和for循环的综合应用（轮播图）

效果图（鼠标移开时，图片自动切换，移入时，停止切换；鼠标放入左右箭头那，背景变白，箭头变红变为鼠标手且内角从120度变为90度，点击可以切换图片右下一张左上一张；鼠标移入下面相应的数字变换为相应的图片且背景变蓝变为鼠标手。）

head部分：

*{margin: 0;padding: 0}
.box{
    width: 600px;
    height: 400px;
    border: 1px solid;
    margin: 100px auto;
}
.head{
    width: 600px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    top: 100px;
    border: 1px solid;

}
.head>div{
    width: 148px;
    height: 50px;
    border: 1px solid;
    float:left;
    font: 30px/50px "";
    text-align: center;
    background: #a81e32;
}
.head>div:hover{
    font:bold 30px/50px "";
    background: beige;
    color: #00A7F6;
    text-decoration: underline;
}
.a{
    width: 600px;
    height: 400px;
    background: url("img/1.jpg") no-repeat;
}
.b{
    width: 600px;
    height: 400px;
    background: url("img/2.jpg") no-repeat;
}
.c{
    width: 600px;
    height: 400px;
    background: url("img/3.jpg") no-repeat;
}
.d{
    width: 600px;
    height: 400px;
    background: url("img/4.jpg") no-repeat;
}
.e{
    width: 600px;
    height: 400px;
    background: url("img/5.jpg") no-repeat;
}
.box span{
    display: none;
    position: relative;
    top: -100px;
}
.box .a{
    display: block;
}
ul{
    list-style: none;
    position: relative;
    left:220px;
    top: -130px;
}
li{
    width: 20px;
    height: 20px;
    border:1px solid red;
    border-radius: 50%;
    font: 12px/20px '';
    text-align: center;
    color: white;
    color: black;
    float: left;
    margin-left: 10px;
    cursor: pointer;
}
.act{
    background: #00A7F6;
}
p{
    position: relative;
    left: 10px;
    top: 360px;
    font: bold 20px "";
    color: whitesmoke;

}
#left{
    width: 50px;height: 50px;
    border-radius: 50%;
    position: relative;
    top:170px;
    left: 30px;
    z-index: 99;
    background: transparent;
}

#right{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    top:120px;
    right: -520px;
    z-index: 99;
    background: transparent;
}

.left_1,.left_2,.right_1,.right_2{
    width: 20px;
    border-bottom: 3px solid grey;
}

.left_1{
    position: absolute;
    top:25px;
    left: 15px;
    transform-origin: 0 0;
    transform: rotateZ(-60deg);
}

.left_2{
    position: absolute;
    top:25px;
    left: 18px;
    transform-origin: 0 0;
    transform: rotateZ(60deg);
}

#left:hover,#right:hover{
    background: white;
    cursor: pointer;
}

#left:hover .left_1,#right:hover .right_2{
    border-bottom: 3px solid red;
    transform: rotateZ(-45deg);
}

#left:hover .left_2,#right:hover .right_1{
    border-bottom: 3px solid red;
    transform: rotateZ(45deg);
}

.right_1{
    position: absolute;
    top:25px;
    right: 15px;
    transform-origin: 20px 0px;
    transform: rotateZ(60deg);
}

.right_2{
    position: absolute;
    top:25px;
    right: 18px;
    transform-origin: 20px 0px;
    transform: rotateZ(-60deg);
}

JS部分：

window.onload=function () {
    var ospan=document.getElementsByTagName("span");
    var oli=document.getElementsByTagName("li");
    var obox=document.getElementsByClassName("box")[0];
    var oleft=document.getElementById("left");
    var oright=document.getElementById("right");
    var ospanNum=0;
    for(var i=0;i<oli.length;i=i+1){
        oli[i].index=i;
        oli[i].onmouseover=function () {
            for(var j=0;j<oli.length;j++){
                oli[j].className="";
                ospan[j].classList.remove("a");
            }
            this.className="act";
            ospan[this.index].classList.add("a");
            ospanNum=this.index;
        }
    }
    oright.onclick=fn;
    x=setInterval(fn,1000);
    obox.onmouseover=function(){
        clearInterval(x);
    };

    obox.onmouseout=function(){
        x=setInterval(fn,1000);
    }


    function fn () {
        ospanNum=ospanNum+1;
        if(ospanNum>=ospan.length){
            ospanNum=0;
        }
        for(var j=0;j<oli.length;j++){
            oli[j].className="";
            ospan[j].classList.remove("a");
        }
        ospan[ospanNum].classList.add("a");
        oli[ospanNum].className="act";

    }
    oleft.onclick=function  () {
        ospanNum=ospanNum-1;
        if(ospanNum<0){
            ospanNum=ospan.length-1;
        }
        for(var j=0;j<oli.length;j++){
            oli[j].className="";
            ospan[j].classList.remove("a");
        }
        ospan[ospanNum].classList.add("a");
        oli[ospanNum].className="act";
    }



}

body部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css1.css"  rel="stylesheet" type="text/css">
    <script src="js1.js"></script>
</head>
<body>
<div class="head">
    <div>热点</div>
    <div>军事</div>
    <div>娱乐</div>
    <div>社会</div>
</div>
<div class="box">
    <div id="left">
        <div class="left_1"></div>
        <div class="left_2"></div>
    </div>
    <div id="right">
        <div class="right_1"></div>
        <div class="right_2"></div>
    </div>
    <div class="cont">
        <span class="a"><p>你好</p></span>
        <span class="b"><p>早上好</p></span>
        <span class="c"><p>中午好</p></span>
        <span class="d"><p>晚上好</p></span>
        <span class="e"><p>谢谢</p></span>
    </div>
    <ul>
        <li class="act">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>