無間斷圖片跑馬燈
來源 : 無間斷圖片跑馬燈有用過Marquee來做圖片跑馬燈的人應該都知道當圖片跑完後，會等圖都跑完後才會再繼續的重跑。
若不知道的話，沒關係~我們來做一個看看。 <body>
<marquee style="overflow:hidden;width:350;background-color:red;">
<img src="0.gif" style="border:1px solid;width:80;">
<img src="1.gif" style="border:1px solid;width:80;">
<img src="2.gif" style="border:1px solid;width:80;">
<img src="3.gif" style="border:1px solid;width:80;">
<img src="4.gif" style="border:1px solid;width:80;">
<img src="5.gif" style="border:1px solid;width:80;">
<img src="6.gif" style="border:1px solid;width:80;">
<img src="7.gif" style="border:1px solid;width:80;">
</marquee>
</body>
我把Marquee加了背景色，然後放了8張圖片，醬就能做出圖片跑馬燈了，不過就如我一開始說的，要等做後一張圖跑過後，才會再重第一張圖繼續跑。這樣是不是感覺沒有連續的感覺呢？
嘿嘿~這次就是要教一種做法，讓圖片跑馬燈就像沒有間斷一樣的跑。但並不是用Marquee來做的唷！先來看Body的部份吧： <body>
<div id="myDiv" style="overflow:hidden;width:350;background-color:red;">
<table> <tr>
<td id="pic1">
<table>
<tr>
<td><img src="0.gif" style="border:1px solid;width:80;"></td>
<td><img src="1.gif" style="border:1px solid;width:80;"></td>
<td><img src="2.gif" style="border:1px solid;width:80;"></td>
<td><img src="3.gif" style="border:1px solid;width:80;"></td>
<td><img src="4.gif" style="border:1px solid;width:80;"></td>
<td><img src="5.gif" style="border:1px solid;width:80;"></td>
<td><img src="6.gif" style="border:1px solid;width:80;"></td>
<td><img src="7.gif" style="border:1px solid;width:80;"></td>
</tr>
</table>
</td>
<td id="pic2"></td>
</tr>
</table>
</div>
</body>
我在Div裡面放了一個Table，這個Table只有一列(TR)兩行(TD)，並給這兩行各一個id，然後在第一行內再放一個Table，這Table有一列(TR)八行(TD)，每一行裡面都放一張圖片。我想各位應該都還聽的霧沙沙吧！來看一下圖例會比較好理解：
http://p5.no-ip.org/disc6/bbs/attachment.php?aid=1579&k=6f021dbe6d981b1957d1e0e804aaa65e&t=1231995278
紅色框就是我們的Div，藍色框就是第一個Table，藍色Table有兩行，在第一行裡面又有一個青綠色框的Table，該青綠色Table只有一列，但是卻有八行，每一行都放了一個深綠色的矩形來表示；而藍色Table的第二行則沒有任何東西，所以它目前是被擠成一小塊。這張圖是重點所在，要看懂才能了解接下來的JavaScript是要做什麼用。
注意的是，一定要設Div的style中的overflow為hidden喔，醬才能把超出範圍的部份先隱藏起來，也就是看不到捲軸。
先來解釋一下等等JavaScript要怎麼做。
一開始我們不是在pic1內又放了一個Tabel，但pic2卻什麼都沒有，各位應該會覺得很奇怪吧！其實pic2是為了放跟pic1內的內容用的。ㄟ~我想應該聽不懂說什麼吧，用圖來表示一下：
http://p5.no-ip.org/disc6/bbs/attachment.php?aid=1580&k=a6e5b6a4c9ec309876b264d0281dc695&t=1231995278
在JavaScript裡面寫了一行pic2.innerHTML = pic1.innerHTML後，醬就會變成有兩個一模一樣的Table，且裡面的行列數都是一樣，當然內容也都是一樣。
這邊比較重點的是，雖然看不到Div的捲軸，但它右邊還是有很多部份都沒顯示出來，所以我們一樣可以透過Div的scrollLeft來看到那些看不到的部份。當Div的捲軸往右移動時，圖片就會往左邊來移動，假設Div的寬是350px、pic1的寬是640px(每張圖是80px乘以8張)，所以當捲軸往右移動到超出pic1的寬時，就會先看到pic2的圖片，又因為pic2的圖片是從pic1複製來的，所以會先看到pic1中的第一張圖，醬是不是會讓人覺得圖片又從第一張接在一起了。若不懂的可以看說明圖：
http://p5.no-ip.org/disc6/bbs/images/default/attachimg.gif http://p5.no-ip.org/disc6/bbs/attachment.php?aid=1581&k=b5bf8323ab3453943185e9c2950d9524&t=1231995278
當醬一直往右移動著，會讓pic1整個都在Div外了。
http://p5.no-ip.org/disc6/bbs/attachment.php?aid=1582&k=5a8bad146f9f091c4f3035c16f8f94ba&t=1231995278
嘿嘿~注意聽喔，重點來了！當現在Div中的圖片都是pic2時，我們就讓Div的捲軸馬上又回到左邊，因為pic1跟pic2的圖片都一樣，所以會讓人錯以為是還是在看pic2的圖，但其實已經又回到pic1了，然後一直循環循環，醬就變成了無間斷的跑馬燈囉。
了解是怎麼一回事後，現在換看JavaScript： <script type="text/javascript">
<!--
//變數Speed為設定捲軸的速度用 越小越快
var Speed=1;
//接受setInterval所回傳的值
var timer;
//取得myDiv的參考用的變數
var myDiv = document.getElementById("myDiv");
//取得pic2的參考用的變數
var pic2= document.getElementById("pic2");
//讓pic2的innerHTML等於pic1的innerHTML
pic2.innerHTML=document.getElementById("pic1").innerHTML;
//用來捲動myDiv捲軸用的主程式
function picMarquee(){
//若pic2的寬小於myDiv的scrollLeft，表示捲軸已經過了第一行
//所以讓Div的scrollLeft再回到原來的位置；反之 則繼續往右跑
if(pic2.offsetWidth - myDiv.scrollLeft <= 0){
myDiv.scrollLeft = 0;
}else{
myDiv.scrollLeft++;
}
}
//每Speed毫秒就執行一次pciMarquee()
timer=setInterval(picMarquee,Speed);
//當滑鼠在myDiv上時 就停止捲動
myDiv.onmouseover=function(){
clearInterval(timer);
}
//當滑鼠離開myDiv上時 就繼續往右捲動
myDiv.onmouseout=function(){
timer=setInterval(picMarquee,Speed);
}
//-->
</script>
再解釋完做法後，現在看JavaScript應該是很容易了解了吧！picMarquee()函式就是判斷Div是要繼續往右移動捲軸還是回到左邊。且當滑鼠移到Div上時，就停止移動圖片；若離開了Div，則繼續移動圖片，這些都是setInterval()函式的應用而已。
看完了之後應該會覺得，這一切都是幻覺~嚇不倒我滴！只是運用了很簡單的方法來造成這種錯覺。ㄟ~我想會有人問說，那若要讓圖片是往上跑的話，那要怎麼做呢？原理是一樣的，只是Table的構造要改一下就可以了。
我們就來看若要往上跑的話，Body的部份： <body>
<div id="myDiv" style="overflow:hidden;height:250;width:110;background-color:red;">
<table cellpadding=0 cellspacing=0>
<tr>
<td id="pic1">
<table>
<tr>
<td><img src="0.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="1.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="2.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="3.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="4.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="5.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="6.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
<tr>
<td><img src="7.gif" style="border:1px solid;width:100;height:100"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="pic2"></td>
</tr>
</table>
</div>
</body>
剛剛是在一個TR裡面放了八個TD(圖)，現在則改成一個TR就放一個TD(圖)。
而JavaScript則要把原來判斷寬的部份改成高，移動Div左右的scrollLeft改成上下的scrollTop： <script type="text/javascript">
<!--
//變數Speed為設定捲軸的速度用 越小越快
var Speed=1;
//接受setInterval所回傳的值
var timer;
//取得myDiv的參考用的變數
var myDiv = document.getElementById("myDiv");
//取得pic2的參考用的變數
var pic2= document.getElementById("pic2");
//讓pic2的innerHTML等於pic1的innerHTML
pic2.innerHTML=document.getElementById("pic1").innerHTML;
//用來捲動myDiv捲軸用的主程式
function picMarquee(){
//若pic2的高小於myDiv的scrollTop，表示捲軸已經過了第一行
//所以讓Div的scrollTop再回到原來的位置；反之 則繼續往下跑
if(pic2.offsetHeight - myDiv.scrollTop <= 0){
myDiv.scrollTop = 0;
}else{
myDiv.scrollTop++;
}
}
//每Speed毫秒就執行一次pciMarquee()
timer=setInterval(picMarquee,Speed);
//當滑鼠在myDiv上時 就停止捲動
myDiv.onmouseover=function() {
clearInterval(timer);
}
//當滑鼠離開myDiv上時 就繼續往下捲動
myDiv.onmouseout=function() {
timer=setInterval(picMarquee,Speed);
}
//-->
</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
頁:
[1]