本文實例講述了JS左右無縫輪播功能。分享給大家供大家參考,具體如下:
創(chuàng)新互聯(lián)建站從2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元隆林做網(wǎng)站,已為上家服務(wù),為隆林各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108
其中對上一頁下一頁按鈕設(shè)置visibility屬性是為了解決輪播中點擊上一頁下一頁導(dǎo)致的bug,應(yīng)為是a標(biāo)簽所以用了visibility屬性,如果是按鈕button可以直接設(shè)置在輪播過程中按鈕不可點擊,當(dāng)然其他解決方法都可以,以實際為準(zhǔn)
代碼如下:換換圖片就可以直接用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 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;//將輪播內(nèi)容復(fù)制一份 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>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
當(dāng)前名稱:JS左右無縫輪播功能完整實例
瀏覽地址:http://muchs.cn/article18/jchdgp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、云服務(wù)器、響應(yīng)式網(wǎng)站、軟件開發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容