本文我們實現純JS方式的滾動廣告效果。
先show一下成品：
首先是網頁樣式：
1. #demo {
2. background: #FFF;
3. overflow:hidden;
4. border: 1px dashed #CCC;
5. width: 1280px;
6. height:200px;
7. }
8. #demo img {
9. border: 3px solid #F2F2F2;
10. }
11. #indemo {
12. float: left;
13. width: 800%;
14. }
15. #demo1 {
16. float: left;
17. }
18. #demo2 {
19. float: left;
20. }
布局如下：
1. <div id="demo">
2. <div id="indemo">
3. <div id="demo1">
4. <a href="#"><img src="banner.jpg" border="0" /></a>
5. <a href="#"><img src="banner2.jpg" border="0" /></a>
6. </div>
7. <div id="demo2"></div>
8. </div>
9. </div>
具體的JS實現：
1. <script>
2. var speed=10;
3. var tab=document.getElementById("demo");
4. var tab1=document.getElementById("demo1");
5. var tab2=document.getElementById("demo2");
6. tab2.innerHTML=tab1.innerHTML;
7. function Marquee(){
8. if(tab2.offsetWidth-tab.scrollLeft==0)
9. tab.scrollLeft-=tab1.offsetWidth
10. else{
11. tab.scrollLeft++;
12. }
13. }
14. var MyMar=setInterval(Marquee,speed);
15. tab.onmouseover=function() {clearInterval(MyMar)};
16. tab.onmouseout=function() {MyMar=setInterval
17. (Marquee,speed)};
18. </script>
這里要注意的是：
scrollLeft代表頁面利用滾動條滾動到右側時，隱藏在滾動條左側的頁面的寬度。
offsetWidth 是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變。
setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算表達式。setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。
明白了這個具體的實現就好理解了。
實現的原理是這樣的：首先將需要滾動的內容復制一份。當右側的div顯示的內容與左側影藏的內容寬度相同時將父容器左側影藏的內容顯示出來，這樣就實現了將左側影藏的內容顯示出來同時將右側內容重新隱藏。如果右側內容顯示的部分少於左側影藏的內容就繼續講父容器想左側移動，實現影藏。其中有一點需要注意的是，由於這里是將兩張圖片同時放入左側，當右側顯示了一半時會將左側影藏的完全顯示出來，又因為右側顯示的內容與左側的左邊內容相同所以實現了循環滾動的效果。
這樣平滑的滾動就實現了。
謝謝支持！
可以聯系我進行交流。Renhanlinbsl@163.com
2016.2.5
4:55