隨機廣告播放

各位應該會發現上某些網站時，每次進去看到的廣告都不一樣，且點下去連到的網站也不同，其實這算是蠻常見的隨機廣告。今天要來介紹三種單一圖片的隨機圖片顯示效果。

這三種差異的地方只是在JavaScript裡面的function有點小不同，在HTML的部份其實都是一樣的，下面先來看在Body的部份：



在onLoad時呼叫了showImg()這個方法，我會把圖片給放到Div裡面。在介紹這三種效果時，Body這部份都是相同的喔。

先說一下等等要顯示的圖片，這邊我準備了五張大小一樣的圖片，依序命名為banner0.gif、banner1.gif、banner2.gif、banner3.gif、banner4.gif。

OK，讓我們來一一來看這三種效果的showImg()吧。

第一種：



最常見的方法就是用亂數來選出要顯示的圖片，因為是數字嘛~所以在圖片檔名的部份最好是要帶有規則的數字，但是要小心的是，在JavaScript中用Math.random()所產生出來的亂數是介於0~1之間的數字，但是我們的圖片是從0~4，所以要再乘以5才行，最後再用Math.round()或是Math.floor()來取得整數即考。接著在my_div中放入<img>的標籤且把src指定為圖片的名稱加上亂數產生出來的數字，醬就能做出第一種的的效果了。

第二種：



其實做法跟第一種是一樣的，只是這邊我用了myImg陣列來存放所要顯示的圖片檔名，醬子在圖片的命名上，就可以不用像第一種一樣要有順序規則。

第三種：



這一種就是一開始說的，廣告圖片不同且點下去後能連結到各自的網站去。做法跟第二種類似，只是這次用的是二維陣列來存放圖片檔名及所要連結的網址，陣列的用法應該不用我再教了吧。

範例瀏覽：

http://abgne.myweb.hinet.net/0003/0003_1.html

http://abgne.myweb.hinet.net/0003/0003_2.html

http://abgne.myweb.hinet.net/0003/0003_3.html

瀏覽範例時可以多重整幾次來看變化喔。

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

x0

GOOD
好樣的
我就線哪來試試嚕

x0