廣告廣告
  加入我的最愛 設為首頁 風格修改
首頁 首尾
 手機版   訂閱   地圖  簡體 
您是第 3731 個閱讀者
 
發表文章 發表投票 回覆文章
  可列印版   加為IE收藏   收藏主題   上一主題 | 下一主題   
keigo
個人頭像
個人文章 個人相簿 個人日記 個人地圖
初露鋒芒
級別: 初露鋒芒 該用戶目前不上站
推文 x0 鮮花 x71
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片
推文 x0
[JScript][討論] 隨機圖片輪播
上次教了隨機廣告播放後,現在要教的是另一種型的廣告播放,叫做輪播。什麼是輪播?顧名思義就是輪流播放,在不重整頁面下一直播放各種不同的圖片,這就是輪播。

輪播的原理其實跟隨機播放差不多,只是多用了個setInterval()函式而已。

讓我們來看要怎樣才能做到這樣的效果吧。接下來所用的範例是隨機廣告播放中的第二個範例。不知道的可以先來看看這一篇:http://blog.xuite.net/abgne/diary1/3867092



在Body的部份並沒有做任何修改。



在JavaScript的部份,我只是把myImg陣列中的圖片換成比較可愛的男生圖,在showImg()函式中一樣沒做任何改變。

這邊要注意的是我用了setInterval("showImg()",2000);這個就是本次要教的重點。setInterval()函式需要帶入兩個參數,第一個是所要執行的函式,第二個是每隔幾毫秒要執行一次。所以這邊我們是設成每隔2000毫秒(2秒)就執行一次showImg()函式,醬就能做到N張圖片隨機輪播了。

有人問說:如何做到在N張圖片中選出M張來做隨機的輪播呢?

我們拿剛剛的範例來修改一下就能做到醬的效果了,在Body部份一樣是不用做修改,所以直接來看JavaScript吧!



我多宣告了一個長度為3的playImg()陣列來存放選出來後的圖片,用nowIndex來紀錄目前是播放到playImg()陣列中的第幾個位置,接下來就是用for迴圈來從myImg()陣列中隨機選3張圖放到playImg()陣列中。到這裡應該都還不難理解吧。

因為要控制圖片能從第一張、第二張...醬子播放到最後一張時,能繼續回到第一張的循環播放,所以在指定nowIndex時要判斷nowIndex+1後是否大於等於playImg()陣列的長度。

不過若多重整幾次上面的範例時,不知道您有沒有發現到圖片並沒有變化,正確的說法應該是圖片重覆,所以看起來會覺得沒變化。會醬子是因為我們在從myImg()陣列中取圖放到playImg()陣列時,我們並沒有判斷圖片是否已經存在playImg()陣列中了,所以才會發生圖片有重覆的情況。

讓我們來修改一下Code做個重覆的檢驗吧。



重覆的判斷只要寫在for迴圈中就行了,多個迴圈來把剛從myImg()陣列中取出的圖片跟playImg()陣列中的做比較。醬子改過就能做到N張取M張來輪播且圖片不會重覆囉。

範例瀏覽:

http://abgne.myweb.hinet....005_1.html

http://abgne.myweb.hinet....005_2.html

http://abgne.myweb.hinet....005_3.html

以上內容於2005/09/06發表在小弟的Blog裡http://blog.xuite.net/abgne/diary1/3900476


[ 此文章被keigo在2005-09-07 19:50重新編輯 ]



歡迎各位參觀小弟的Blog男丁格爾's 脫殼玩
獻花 x1 回到頂端 [樓 主] From:台灣中華電信 | Posted:2005-09-06 11:21 |

首頁  發表文章 發表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.065930 second(s),query:15 Gzip disabled
本站由 瀛睿律師事務所 擔任常年法律顧問 | 免責聲明 | 本網站已依台灣網站內容分級規定處理 | 連絡我們 | 訪客留言