JS無縫滾動效果實現方法分析_javascript技巧

本文執行個體講述了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程式設計有所協助。