js无缝轮播

来源：互联网发布：人见人爱网络剧沈腾编辑：程序博客网时间：2024/05/19 01:59

其中对上一页下一页按钮设置visibility属性是为了解决轮播中点击上一页下一页导致的bug，应为是a标签所以用了visibility属性，如果是按钮button可以直接设置在轮播过程中按钮不可点击，当然其他解决方法都可以，以实际为准

代码如下：换换图片就可以直接用

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {margin:0;padding:0;}        #scrollImg{width:1000px;margin:100px auto;}        #prev{float:left;line-height:250px;}        #next{float:right;line-height:250px;}        #div1 {width:800px;height:250px;margin:0px auto;position:relative;overflow:hidden;}        #div1 ul {position:absolute;left:0;top:0;}        #div1 ul li {float:left;list-style:none;width:200px;height:250px;}        #div1 ul li img{width:100%;height:100%;}    </style></head><body><div id="scrollImg">    <a href="javascript:void(0)" id="prev">向左</a>    <a href="javascript:void(0)" id="next">向右</a>    <div id="div1">        <ul>            <li><img src="image/0.jpeg" /></li>            <li><img src="image/1.JPEG" /></li>            <li><img src="image/3.jpg" /></li>            <li><img src="image/4.jpeg" /></li>        </ul>    </div></div><script>    window.onload=function(){        var oDiv=document.getElementById("div1");        var oUl=document.getElementsByTagName("ul")[0];        var oLi=document.getElementsByTagName("li");        var index=0;        var timer;//定时器        oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//将轮播内容复制一份        oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";        //移动速度        var speed=-10;        //控制滚动的方向        var prev=document.getElementById("prev");        var next=document.getElementById("next");       //上一页        prev.onclick=function(){            if(index==4){                index=1;                oUl.style.left="0px";            }else{                index++;                speed=10;            }            move();        };        //下一页        next.onclick=function(){            if(index==0){                index=3;                oUl.style.left=-oUl.offsetWidth/2+"px";            }else{                index--;                speed=-10;            }            move();        };        function  move(){            timer=setInterval(function () {                oUl.style.left=oUl.offsetLeft-speed+"px";                var stop=-index*oLi[0].offsetWidth+"px";                prev.style.visibility="hidden";                next.style.visibility="hidden";                if(oUl.style.left==stop){                    clearInterval(timer);                    prev.style.visibility="visible";                    next.style.visibility="visible";                }            },20);        }    }</script></body></html>

0 0