JS实现首页图片无限轮播

Myth丶恋晨 2022-05-17 06:39 209阅读 0赞

index.html

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";
                }
            }
        }