JS实现首页图片无限轮播

index.html

<div class="picBanner">
            <div class="pic">
                <a href="#"><img id="n1" src="img/banner1.jpg"/></a>
                <a href="#"><img id="n2" src="img/banner2.jpg"/></a>
                <a href="#"><img id="n3" src="img/banner3.jpg"/></a>
                <a href="#"><img id="n4" src="img/banner4.jpg"/></a>
            </div>
            <div class="inner">
                <ul>
                    <li onmouseover="reshow(1)"></li>
                    <li onmouseover="reshow(2)"></li>
                    <li onmouseover="reshow(3)"></li>
                    <li onmouseover="reshow(4)"></li>
                </ul>
            </div>
        </div>

css文件设置样式：

/*设置图片轮播*/
.picBanner{
    width: 100%;
    height: 460px;

}
.pic{
    width: 100%;
    height: 460px;
    overflow: hidden;
}
.picBanner img{
    width: 100%;
    height: 460px;
}

.inner{
    width: 100%;
    min-width: 1000px;
    height: 16px;
    position: relative;
    bottom: 20px;
}

.inner ul{
    width: 80px;
    height: 16px;
    position: relative;
    margin: 0px auto;
    list-style-type: none;
}
.inner ul li{
    width: 20px;
    height: 16px;
    background-image:url(../img/sprite.png);
    background-position: 3px -19px;
    float: left;
    cursor: pointer;
}
.inner ul li:hover{
    background-image:url(../img/sprite.png);
    background-position: 3px -34px;
}

js文件写入：

<!--图片轮播-->
    var nowshow=0;
    var sid;
    function show(){
        nowshow++;
        for(var i=1;i<=4;i++){
            if(nowshow==5){
                nowshow=1;
            }
            if(i==nowshow){
                var img=document.getElementById("n"+i);
                img.style.display="block";
            }else{
                var img=document.getElementById("n"+i);
                img.style.display="none";
            }
        }
    }
        sid=setInterval("show()",3000);
        function reshow(s){
            clearInterval(sid);
           for(var i=1;i<=4;i++){
            if(i==s){
                var img=document.getElementById("n"+i);
                img.style.display="block";
            }else{
                var img=document.getElementById("n"+i);
                img.style.display="none";
            }
        }
    }