【引用自 http://www.flycan.com.tw/board/modules/newbb/viewtopic.php?topic_id=1521】
有用過Marquee來做圖片跑馬燈的人應該都知道當圖片跑完後，會等圖都跑完後才會再繼續的重跑。若不知道的話，沒關係~我們來做一個看看。 
我把Marquee加了背景色，然後放了8張圖片，醬就能做出圖片跑馬燈了，不過就如我一開始說的，要等做後一張圖跑過後，才會再重第一張圖繼續跑。這樣是不是感覺沒有連續的感覺呢？嘿嘿~這次就是要教一種做法，讓圖片跑馬燈就像沒有間斷一樣的跑。但並不是用Marquee來做的唷！先來看 Body 及 CSS 的部份吧： 
我在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： 
再解釋完做法後，現在看JavaScript應該是很容易了解了吧！picMarquee()函式就是判斷Div是要繼續往右移動捲軸還是回到左邊。且當滑鼠移到Div上時，就停止移動圖片；若離開了Div，則繼續移動圖片，這些都是setInterval()函式的應用而已。看完了之後應該會覺得，這一切都是幻覺~嚇不倒我滴！只是運用了很簡單的方法來造成這種錯覺。ㄟ~我想會有人問說，那若要讓圖片是往上跑的話，那要怎麼做呢？原理是一樣的，只是Table的構造要改一下就可以了。我們就來看若要往上跑的話，Body 及 CSS 的部份： 
剛剛是在一個TR裡面放了八個TD(圖)，現在則改成一個TR就放一個TD(圖)。而JavaScript則要把原來判斷寬的部份改成高，移動Div左右的scrollLeft改成上下的scrollTop： 
也可以在在圖片上加入超連結喔！
範例瀏覽：
http://abgne.myweb.hinet.net/0021/0021_3.html
留言列表
工作甘苦談 (2)