問題討論區


【JavaScript 語法】文章精華區


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



[JavaScript]無間斷圖片跑馬燈
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
有用過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_1.html   http://abgne.myweb.hinet.net/0021/0021_2.html   http://abgne.myweb.hinet.net/0021/0021_3.html

 


以上內容於2006-01-08 03:03 發表在 http://blog.xuite.net/abgne/diary1/4757290

2009/5/7 13:40
 


回覆: 無間斷圖片跑馬燈
會員一級
註冊日期:
2009/5/13 15:45
留言: 1
我照你ㄉ方法也做不出第二種效果ㄟ
可以教一下嗎?

2009/5/13 16:26
 


回覆: 無間斷圖片跑馬燈
會員三級
註冊日期:
2008/4/3 16:26
留言: 15
請問老師~
這個範例的程式,可以存成js檔?再從dreamweaver外部連結此js檔嗎?
如果可以該怎麼做呢?上網找也沒找到~


To~ she2108
我照著老師的範例有做出來耶~你要不要給我mail,我寄檔案給你看!

2009/5/14 9:52
 


回覆: 回覆: 無間斷圖片跑馬燈
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
she2108 您好:

不知道您的問題是卡在那邊呢?
如果可以的話~麻煩把有問題的code貼上來讓大家幫忙找

2009/5/14 14:35
 


回覆: 回覆: 無間斷圖片跑馬燈
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
sunmoon0214 您好:

當然是可以囉, 只是要多加個 onload 的事件
拿第二個例子來看, 要把 js 放外部的話, 那 code 要改成


window
.onload = function(){
    var
Speed=1;
    var
timer;
    var
myDiv = document.getElementById("myDiv");
    var
pic2= document.getElementById("pic2");
    
pic2.innerHTML=document.getElementById("pic1").innerHTML;

    function
picMarquee(){
        if(
pic2.offsetWidth - myDiv.scrollLeft <= 0){
            
myDiv.scrollLeft = 0;
        }else{
            
myDiv.scrollLeft++;
        }
    }
    
timer=setInterval(picMarquee,Speed);
    
myDiv.onmouseover=function(){
        
clearInterval(timer);
    }
    
myDiv.onmouseout=function(){
        
timer=setInterval(picMarquee,Speed);
    }
};


接下來在網頁中加入 js 的引用就可以了

2009/5/14 14:45
 


回覆: 無間斷圖片跑馬燈
會員三級
註冊日期:
2008/4/3 16:26
留言: 15
你上次教我的外部連結js,我有做出來
現在又有另一個問題想請問老師
這圖片跑馬燈,若我為每個td命名,再用css做連結
而我想要文繞圖,在css語法方面,老師能幫我看一下嗎?
我要接著輸入第二行字,就超出td的高了,不像文繞圖(見圖二)
而我希望是像圖一那樣,以下是我的css語法

.RH {
display:block;
width:220px;
height:50px;
font-size:12px;
float:left;
background-image:url(im/images2/pulsafeeder.gif);
background-repeat:no-repeat;
padding:6px 0px 0px 80px;
}

附件:



jpg  dunk1.jpg (4.49 KB)
221_4a165f7f86aec.jpg 250X60 px

jpg  dunk2.jpg (3.80 KB)
221_4a165f9f23dba.jpg 250X120 px

2009/5/22 16:19
 


回覆: 回覆: 無間斷圖片跑馬燈
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106

sunmoon0214 寫道:
你上次教我的外部連結js,我有做出來
現在又有另一個問題想請問老師
這圖片跑馬燈,若我為每個td命名,再用css做連結
而我想要文繞圖,在css語法方面,老師能幫我看一下嗎?
我要接著輸入第二行字,就超出td的高了,不像文繞圖(見圖二)
而我希望是像圖一那樣,以下是我的css語法

.RH {
display:block;
width:220px;
height:50px;
font-size:12px;
float:left;
background-image:url(im/images2/pulsafeeder.gif);
background-repeat:no-repeat;
padding:6px 0px 0px 80px;
}


您好:

是否可以提供有問題的範例檔案供測試呢?
這樣對於回答者來說會更快速直接的切進問題點..

2009/5/26 10:35
 


回覆: [JavaScript]無間斷圖片跑馬燈
會員一級
註冊日期:
2011/7/20 14:08
留言: 1
老師,你教的那個跑馬燈有分windows7 或windos xp嗎!?

因為我在windos7的電腦做圖片跑馬燈,但在windos xp看,
只能跑到第八張(我全部有五十張圖片)

我做的是有間斷的那種圖片跑馬燈!!



麻煩老師教教我~~
感恩!!

2011/7/20 14:25
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS