JS無縫滾動效果實現(xiàn)方法分析

更新時間：2016年12月21日 09:01:27 作者：鬼畜十三

這篇文章主要介紹了JS無縫滾動效果實現(xiàn)方法,結合實例形式較為詳細的分析了無縫滾動的原理、實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下

本文實例講述了JS無縫滾動效果實現(xiàn)方法。分享給大家供大家參考，具體如下：

效果：

1.默認緩慢往左滾動

2.放到左箭頭上還是向左滾動，放到右箭頭上向右滾動

3.放到圖片上停止?jié)L動，移出繼續(xù)滾動

思路：

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的寬度的話，運動過程中后面的會先出現(xiàn)再加載圖片，有一種不流暢感，切圖片過多會分行，由外面的div決定寬度
 timer=setInterval(function(){
  oul.style.left=oul.offsetLeft+ispeed+'px';  //offsetLeft輸出的是數(shù)字不帶單位,右邊也用oul.style.left輸出的是字符串，而不是數(shù)值，而且它取得是行間樣式，無用
  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數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: