本文實例講述了JS左右無縫輪播功能。分享給大家供大家參考，具體如下：
其中對上一頁下一頁按鈕設置visibility屬性是為了解決輪播中點擊上一頁下一頁導致的bug，應為是a標簽所以用了visibility屬性，如果是按鈕button可以直接設置在輪播過程中按鈕不可點擊，當然其他解決方法都可以，以實際為準
代碼如下：換換圖片就可以直接用
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>www.49028c.com JS左右無縫輪播</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)" rel="external nofollow" rel="external nofollow" id="prev">向左</a> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" 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>
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
