原生javascript實現的水平圖片無縫滾動效果:圖片水平無縫滾動效果在大量的網站都有應用，特別是一些企業網站在展示產品的時候，因為是動態效果，所以能夠給網站增色不少，相比靜態圖片展示更能夠吸引用戶的註意力，下麵就通過實例代碼介紹一下如何實現此效果。代碼如下: <!DOCTYPE html> <h
原生javascript實現的水平圖片無縫滾動效果:
圖片水平無縫滾動效果在大量的網站都有應用，特別是一些企業網站在展示產品的時候，因為是動態效果，所以能夠給網站增色不少，相比靜態圖片展示更能夠吸引用戶的註意力，下麵就通過實例代碼介紹一下如何實現此效果。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #demo{ background:#FFF; overflow:hidden; border:1px dashed #CCC; width:500px; } #indemo{ float:left; width:2000px; } #indemo a{ width:100px; height:100px; float:left; background-color:blue; margin-left:5px; text-align:center; line-height:100px; color:red; text-decoration:none; } #demo1{float:left;} #demo2{float:left;} </style> <script type="text/javascript"> window.onload=function(){ var speed=10; var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0){ tab.scrollLeft-=tab1.offsetWidth } else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; } </script> </head> <body> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#">螞蟻部落一</a> <a href="#">螞蟻部落二</a> <a href="#">螞蟻部落三</a> <a href="#">螞蟻部落四</a> <a href="#">螞蟻部落五</a> <a href="#">螞蟻部落六</a> </div> <div id="demo2"></div> </div> </div> </body> </html>
以上代碼實現了我們要求，為了掩飾方便，將圖片替換為文字，實際應用中，只要稍加修改就可以了，代碼很簡單，但是對於初學者來說可能就有點麻煩，下麵就對它做一下註釋。
一.代碼註釋:
1.window.onload=function(){}，當文檔內容完全載入完畢再去執行函數中的代碼。
2.var speed=10，設置滾動的速度，值越小速度越快。
3.var tab=document.getElementById("demo")，根據id屬性值獲取對象。
4.tab2.innerHTML=tab1.innerHTML，複製一份內容給tab2.
5.function Marquee(){}，此函數是滾動的核心實現。
6.if(tab2.offsetWidth-tab.scrollLeft<=0){tab.scrollLeft-=tab1.offsetWidth } ，判斷向左滾動的尺寸是否小於等於tab2或者tab1的寬度，如果小於等於，則說明一個完整的圖片隊列滾動完畢，這個時候是tab2的接續在tab1的後面，這個時候重新設置tab.scrollLeft為0，也就是重新開始滾動，這樣就實現了無縫滾動效果。
二.相關閱讀:
1.innerHTML屬性可以參閱js的innerHTML屬性的用法一章節。
2.offsetWidth屬性可以參閱scrollTop、offsetHeight和offsetTop等屬性用法詳解一章節。
3.scrollLeft屬性可以參閱offsetLeft、clientLeft和scrollLeft等屬性的用法一章節。
4.setInterval()函數可以參閱setInterval()函數用法詳解一章節。
5.clearInterval()函數可以參閱window對象的clearInterval()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11997
更多內容可以參閱:http://www.softwhy.com/javascript/
