各位應該會發現上某些網站時,每次進去看到的廣告都不一樣,且點下去連到的網站也不同,其實這算是蠻常見的隨機廣告。今天要來介紹三種單一圖片的隨機圖片顯示效果。
這三種差異的地方只是在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....003_1.htmlhttp://abgne.myweb.hinet....003_2.htmlhttp://abgne.myweb.hinet....003_3.html瀏覽範例時可以多重整幾次來看變化喔。
以上內容於2005/09/01發表在小弟的Blog裡
http://blog.xuite.net/abgne/diary1/3867092