本文實例講述了JS無縫滾動效果實現方法。分享給大家供大家參考，具體如下：
效果：
1.默認緩慢往左滾動
2.放到左箭頭上還是向左滾動，放到右箭頭上向右滾動
3.放到圖片上停止滾動，移出繼續滾動
思路：
1.計算圖片列表ul的寬度
2.開啟定時器，使其向左邊距不斷增大，造成向左運動的效果
3.圖片列表復制一份，向左移動時，當左邊距大于一份的寬度時，把它的左邊距拉回到0。向右移動時，當左邊距大于0時，把它的左邊距拉到整個兩份圖片列表一半的寬度（即一份的寬度）。（拉的瞬間很快，用戶察覺不到，造成一種無縫滾動的假象）
4.offsetLeft值的正負決定往哪邊移動
5.放到圖片上停止這個定時器，移開再開啟
window.onload=function(){ var odiv=document.getElementById('div'); var oul=odiv.getElementsByTagName('ul')[0]; var oli=oul.getElementsByTagName('oul'); var btn=document.getElementsByTagName('btn'); var ispeed=-1; var timer=null; oul.innerHTML+=oul.innerHTML; //圖片列表復制一份 oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的寬度的話，運動過程中后面的會先出現再加載圖片，有一種不流暢感，切圖片過多會分行，由外面的div決定寬度 timer=setInterval(function(){ oul.style.left=oul.offsetLeft+ispeed+'px'; //offsetLeft輸出的是數字不帶單位,右邊也用oul.style.left輸出的是字符串，而不是數值，而且它取得是行間樣式，無用 if(oul.offsetLeft<-oul.offsetWidth/2){ //判斷時也可以用.style.left或.style.width？（不確定） oul.style.left=0; } else if(oul.offsetLeft>0){ oul.style.left=-oul.offsetWidth/2; } ),30}; btn[0].onmouseover=function(){ ispeed=-1; }; btn[1].onmouseover=function(){ ispeed=1; }; oul.onmouseover=function(){ clearInterval(timer); }; oul.onmouseout=function(){ timer=setInterval(function(){ oul.style.left=oul.offsetLeft+ispeed+'px'; if(oul.offsetLeft<-oul.offsetWidth/2){ oul.style.left=0; } else if(oul.offsetLeft>0){ oul.style.left=-oul.offsetWidth/2; } ),30}; //如果把速度變大，而定時器的時間也變大是否可以達到相同效果呢？答案是不能。會變成一卡一卡 };};注：這樣子取得的寬度是不包含margin的，所以圖片間邊距的寫法可以是li的寬度大于img的寬度，li的寬度-img的寬度，就是兩邊的邊距和
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
