TShopping

 找回密碼
 註冊
搜索
查看: 4457|回復: 3

[教學] 無間斷圖片跑馬燈

[複製鏈接]
發表於 2009-1-15 12:54:22 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
來源 : 無間斷圖片跑馬燈


有用過Marquee來做圖片跑馬燈的人應該都知道當圖片跑完後,會等圖都跑完後才會再繼續的重跑。

若不知道的話,沒關係~我們來做一個看看。
  1. <body>
  2. <marquee style="overflow:hidden;width:350;background-color:red;">
  3. <img src="0.gif" style="border:1px solid;width:80;">
  4. <img src="1.gif" style="border:1px solid;width:80;">
  5. <img src="2.gif" style="border:1px solid;width:80;">
  6. <img src="3.gif" style="border:1px solid;width:80;">
  7. <img src="4.gif" style="border:1px solid;width:80;">
  8. <img src="5.gif" style="border:1px solid;width:80;">
  9. <img src="6.gif" style="border:1px solid;width:80;">
  10. <img src="7.gif" style="border:1px solid;width:80;">
  11. </marquee>
  12. </body>
複製代碼

我把Marquee加了背景色,然後放了8張圖片,醬就能做出圖片跑馬燈了,不過就如我一開始說的,要等做後一張圖跑過後,才會再重第一張圖繼續跑。這樣是不是感覺沒有連續的感覺呢?

嘿嘿~這次就是要教一種做法,讓圖片跑馬燈就像沒有間斷一樣的跑。但並不是用Marquee來做的唷!先來看Body的部份吧:
  1. <body>
  2. <div id="myDiv" style="overflow:hidden;width:350;background-color:red;">
  3. <table> <tr>
  4. <td id="pic1">
  5. <table>
  6. <tr>
  7. <td><img src="0.gif" style="border:1px solid;width:80;"></td>
  8. <td><img src="1.gif" style="border:1px solid;width:80;"></td>
  9. <td><img src="2.gif" style="border:1px solid;width:80;"></td>
  10. <td><img src="3.gif" style="border:1px solid;width:80;"></td>
  11. <td><img src="4.gif" style="border:1px solid;width:80;"></td>
  12. <td><img src="5.gif" style="border:1px solid;width:80;"></td>
  13. <td><img src="6.gif" style="border:1px solid;width:80;"></td>
  14. <td><img src="7.gif" style="border:1px solid;width:80;"></td>
  15. </tr>
  16. </table>
  17. </td>
  18. <td id="pic2"></td>
  19. </tr>
  20. </table>
  21. </div>
  22. </body>
複製代碼

我在Div裡面放了一個Table,這個Table只有一列(TR)兩行(TD),並給這兩行各一個id,然後在第一行內再放一個Table,這Table有一列(TR)八行(TD),每一行裡面都放一張圖片。我想各位應該都還聽的霧沙沙吧!來看一下圖例會比較好理解:




紅色框就是我們的Div,藍色框就是第一個Table,藍色Table有兩行,在第一行裡面又有一個青綠色框的Table,該青綠色Table只有一列,但是卻有八行,每一行都放了一個深綠色的矩形來表示;而藍色Table的第二行則沒有任何東西,所以它目前是被擠成一小塊。這張圖是重點所在,要看懂才能了解接下來的JavaScript是要做什麼用。

注意的是,一定要設Div的style中的overflow為hidden喔,醬才能把超出範圍的部份先隱藏起來,也就是看不到捲軸。

先來解釋一下等等JavaScript要怎麼做。

一開始我們不是在pic1內又放了一個Tabel,但pic2卻什麼都沒有,各位應該會覺得很奇怪吧!其實pic2是為了放跟pic1內的內容用的。ㄟ~我想應該聽不懂說什麼吧,用圖來表示一下:




在JavaScript裡面寫了一行pic2.innerHTML = pic1.innerHTML後,醬就會變成有兩個一模一樣的Table,且裡面的行列數都是一樣,當然內容也都是一樣。

這邊比較重點的是,雖然看不到Div的捲軸,但它右邊還是有很多部份都沒顯示出來,所以我們一樣可以透過Div的scrollLeft來看到那些看不到的部份。當Div的捲軸往右移動時,圖片就會往左邊來移動,假設Div的寬是350px、pic1的寬是640px(每張圖是80px乘以8張),所以當捲軸往右移動到超出pic1的寬時,就會先看到pic2的圖片,又因為pic2的圖片是從pic1複製來的,所以會先看到pic1中的第一張圖,醬是不是會讓人覺得圖片又從第一張接在一起了。若不懂的可以看說明圖:



當醬一直往右移動著,會讓pic1整個都在Div外了。




嘿嘿~注意聽喔,重點來了!當現在Div中的圖片都是pic2時,我們就讓Div的捲軸馬上又回到左邊,因為pic1跟pic2的圖片都一樣,所以會讓人錯以為是還是在看pic2的圖,但其實已經又回到pic1了,然後一直循環循環,醬就變成了無間斷的跑馬燈囉。

了解是怎麼一回事後,現在換看JavaScript:
  1. <script type="text/javascript">
  2. <!--
  3. //變數Speed為設定捲軸的速度用 越小越快
  4. var Speed=1;
  5. //接受setInterval所回傳的值
  6. var timer;
  7. //取得myDiv的參考用的變數
  8. var myDiv = document.getElementById("myDiv");
  9. //取得pic2的參考用的變數
  10. var pic2= document.getElementById("pic2");
  11. //讓pic2的innerHTML等於pic1的innerHTML
  12. pic2.innerHTML=document.getElementById("pic1").innerHTML;
  13. //用來捲動myDiv捲軸用的主程式
  14. function picMarquee(){
  15. //若pic2的寬小於myDiv的scrollLeft,表示捲軸已經過了第一行
  16. //所以讓Div的scrollLeft再回到原來的位置;反之 則繼續往右跑
  17. if(pic2.offsetWidth - myDiv.scrollLeft <= 0){
  18. myDiv.scrollLeft = 0;
  19. }else{
  20. myDiv.scrollLeft++;
  21. }
  22. }
  23. //每Speed毫秒就執行一次pciMarquee()
  24. timer=setInterval(picMarquee,Speed);
  25. //當滑鼠在myDiv上時 就停止捲動
  26. myDiv.onmouseover=function(){
  27. clearInterval(timer);
  28. }
  29. //當滑鼠離開myDiv上時 就繼續往右捲動
  30. myDiv.onmouseout=function(){
  31. timer=setInterval(picMarquee,Speed);
  32. }
  33. //-->
  34. </script>
複製代碼

再解釋完做法後,現在看JavaScript應該是很容易了解了吧!picMarquee()函式就是判斷Div是要繼續往右移動捲軸還是回到左邊。且當滑鼠移到Div上時,就停止移動圖片;若離開了Div,則繼續移動圖片,這些都是setInterval()函式的應用而已。

看完了之後應該會覺得,這一切都是幻覺~嚇不倒我滴!只是運用了很簡單的方法來造成這種錯覺。ㄟ~我想會有人問說,那若要讓圖片是往上跑的話,那要怎麼做呢?原理是一樣的,只是Table的構造要改一下就可以了。

我們就來看若要往上跑的話,Body的部份:
  1. <body>
  2. <div id="myDiv" style="overflow:hidden;height:250;width:110;background-color:red;">
  3. <table cellpadding=0 cellspacing=0>
  4. <tr>
  5. <td id="pic1">
  6. <table>
  7. <tr>
  8. <td><img src="0.gif" style="border:1px solid;width:100;height:100"></td>
  9. </tr>
  10. <tr>
  11. <td><img src="1.gif" style="border:1px solid;width:100;height:100"></td>
  12. </tr>
  13. <tr>
  14. <td><img src="2.gif" style="border:1px solid;width:100;height:100"></td>
  15. </tr>
  16. <tr>
  17. <td><img src="3.gif" style="border:1px solid;width:100;height:100"></td>
  18. </tr>
  19. <tr>
  20. <td><img src="4.gif" style="border:1px solid;width:100;height:100"></td>
  21. </tr>
  22. <tr>
  23. <td><img src="5.gif" style="border:1px solid;width:100;height:100"></td>
  24. </tr>
  25. <tr>
  26. <td><img src="6.gif" style="border:1px solid;width:100;height:100"></td>
  27. </tr>
  28. <tr>
  29. <td><img src="7.gif" style="border:1px solid;width:100;height:100"></td>
  30. </tr>
  31. </table>
  32. </td>
  33. </tr>
  34. <tr>
  35. <td id="pic2"></td>
  36. </tr>
  37. </table>
  38. </div>
  39. </body>
複製代碼

剛剛是在一個TR裡面放了八個TD(圖),現在則改成一個TR就放一個TD(圖)。

而JavaScript則要把原來判斷寬的部份改成高,移動Div左右的scrollLeft改成上下的scrollTop:
  1. <script type="text/javascript">
  2. <!--
  3. //變數Speed為設定捲軸的速度用 越小越快
  4. var Speed=1;
  5. //接受setInterval所回傳的值
  6. var timer;
  7. //取得myDiv的參考用的變數
  8. var myDiv = document.getElementById("myDiv");
  9. //取得pic2的參考用的變數
  10. var pic2= document.getElementById("pic2");
  11. //讓pic2的innerHTML等於pic1的innerHTML
  12. pic2.innerHTML=document.getElementById("pic1").innerHTML;
  13. //用來捲動myDiv捲軸用的主程式
  14. function picMarquee(){
  15. //若pic2的高小於myDiv的scrollTop,表示捲軸已經過了第一行
  16. //所以讓Div的scrollTop再回到原來的位置;反之 則繼續往下跑
  17. if(pic2.offsetHeight - myDiv.scrollTop <= 0){
  18. myDiv.scrollTop = 0;
  19. }else{
  20. myDiv.scrollTop++;
  21. }
  22. }
  23. //每Speed毫秒就執行一次pciMarquee()
  24. timer=setInterval(picMarquee,Speed);
  25. //當滑鼠在myDiv上時 就停止捲動
  26. myDiv.onmouseover=function() {
  27. clearInterval(timer);
  28. }
  29. //當滑鼠離開myDiv上時 就繼續往下捲動
  30. myDiv.onmouseout=function() {
  31. timer=setInterval(picMarquee,Speed);
  32. }
  33. //-->
  34. </script>
複製代碼

也可以在在圖片上加入超連結喔!

範例瀏覽:

http://abgne.myweb.hinet.net/0021/0021_1.html

http://abgne.myweb.hinet.net/0021/0021_2.html

http://abgne.myweb.hinet.net/0021/0021_3.html

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-4 22:18 , Processed in 0.054524 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表