上次教了隨機廣告播放後,現在要教的是另一種型的廣告播放,叫做輪播。什麼是輪播?顧名思義就是輪流播放,在不重整頁面下一直播放各種不同的圖片,這就是輪播。
輪播的原理其實跟隨機播放差不多,只是多用了個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.htmlhttp://abgne.myweb.hinet....005_2.htmlhttp://abgne.myweb.hinet....005_3.html以上內容於2005/09/06發表在小弟的Blog裡
http://blog.xuite.net/abgne/diary1/3900476