這篇文章主要介紹了基于定時器實現圖片無縫滾動功能的方法，具有一定借鑒價值，感興趣的朋友可以參考下簡單實現網頁圖片無縫滾動代碼簡單實現網頁圖片無縫滾動代碼，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
一、無縫滾動理論基礎
基礎知識
1.（，time）、（timer）
() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
() 方法會不停地調用函數，直到 () 被調用或窗口被關閉。由 () 返回的 ID 值可用作 () 方法的參數。
() 方法可取消由 () 設置的 。
() 方法的參數必須是由 () 返回的 ID 值。
2.與style.left的區別
獲取的是相對于父對象的左邊距
left 獲取或設置相對于 具有定位屬性(定義為)的父對象 的左邊距
如果父div的定義為,子div的定義為，那么子div的style.left的值是相對于父div的值，
這同是相同的，區別在于：
1. style.left 返回的是字符串，如28px，返回的是數值28，如果需要對取得的值進行計算，還用比較方便。
2. style.left是讀寫的，是只讀的，所以要改變div的位置，只能修改style.left。
3. style.left的值需要事先定義，否則取到的值為空。而且必須要定義在html里，我做過試驗，如果定義在css里，style.left的值仍然 為空，這就是我剛開始碰到的問題，總是取不到style.left的值。
則仍然能夠取到，無需事先定義div的位置。
二、代碼片段
??
??無縫滾動
??
??<script>
????window.onload=function(){
??????var?oDiv=document.getElementById('div1');
??????var?oUl=document.getElementsByTagName('ul')[0];
??????var?aLi=oUl.getElementsByTagName('li');
??????var?lBtn=document.getElementById('lbtn');
??????var?rBtn=document.getElementById('rbtn');
??????//將ul復制一份相加復制給ul（這樣ul相當于有8張圖片）
??????oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
??????oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
??????//speed控制圖片移動方向和速度
??????var?speed=2;
??????function?move(){
????????if(oUl.offsetLeft<-oUl.offsetWidth/2){
??????????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);
??????}
??????//按鈕控制移動方向
??????lBtn.onclick=?function?()?{
????????speed=-2;
??????}
??????rBtn.onclick=function(){
????????speed=2;
??????}
????};
??</script>
??
??
