JS平滑無縫滾動實現———實現首頁廣告自動滾動效果（附實例）

 

本文咱們實現純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