Javascript基礎——利用定時器實現的圖片無縫滾動(offsetLeft)
阿新 • • 發佈：2019-01-29
1、無縫滾動
原理：（1）讓div動起來，讓ul一直向左/向右移動；
（2）即利用定時器讓物體從左到右或從右到左進行滾動。
採用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右）
注意：offsetLeft為一個負值。
步驟：（1）複製li——innerHTML和+=，
（2）修改ul的width—可把之前的1倍寬度擴充到兩倍
例如oUl.innerHTML=oUl.innerHTML+oUl.innerHTML；
（3）滾動過界時，重設位置，需要進行判斷
2、無縫滾動的擴充套件
（1）改變滾動的方向
a、修改滾動的速度speed
若改變大小，即表示滾動的速度發生改變
若改變正負，即表示滾動的方向
b、修改判斷條件
通過修改speed的正負，來改變滾動的方向
（2）滑鼠移入、暫停事件
a、滑鼠移入：關閉定時器clearInterval(timer);
b、滑鼠移出：重新開啟定時器，即setInterval(function,1000);
相關的程式碼如下：
<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定時器實現的圖片無縫滾動</title> <style> *{padding: 0;margin: 0;} #div1{ position: relative; width:820px;height: 155px; margin: 100px auto; overflow: hidden;} #div1 ul{ position:absolute; top:0;left: 0; background: #5F9EA0; } #div1 ul li{ list-style: none; width: 205px;height: 155px; float: left; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var speed=2; //利用速度speed控制方向； oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //求ul的寬度； oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //移動的函式； function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ //由於offsetLeft為一個負值，所以需要加一個負號； oUl.style.left='0'; } //由右向左； if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; } //由左向右； oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(move,30); //滑鼠移入，關閉定時器； oDiv.onmouseover=function(){ clearInterval(timer); }; //滑鼠移出，開啟定時器； oDiv.onmouseout=function(){ timer=setInterval(move,30); }; document.getElementsByTagName('a')[0].onclick=function(){ speed=-2; }; document.getElementsByTagName('a')[1].onclick=function(){ speed=2; } }; </script> </head> <body> <a href="javascript:;">向左</a> <a href="javascript:;">向右</a> <div id="div1"> <ul> <li><img src="img/p1.png"></li> <li><img src="img/p2.png"></li> <li><img src="img/p3.png"></li> <li><img src="img/p4.png"></li> </ul> </div> </body> </html></span><span style="font-size: 18px;"> </span>