Javascript隨機廣告播放

Javascript隨機廣告播放

來源:男丁格爾

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

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

以下為《HTML》原始碼

<body > 
    <div id="my_div"></div> 
</body>

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

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

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

第一種：

以下為《JS》原始碼

<script type="text/javascript"> 
<!-- 
    function showImg(){ 
    //要取0~4，所以要乘以5 
    var imgNo = Math.floor(Math.random()*5); 
        document.getElementById("my_div").innerHTML  = "<img src='banner"+imgNo+".gif'>"; 
    } 
//--> 
</script>

最常見的方法就是用亂數來選出要顯示的圖片，因為是數字嘛~所以在圖片檔名的部份最好是要帶有規則的數字，但是要小心的是，在JavaScript中用Math.random()函式所產生出來的亂數是介於0~1之間的數字，但是我們的圖片是從0~4，所以要再乘以5才行，最後再用Math.round()函式或是Math.floor()函式來取得整數即可。

接著在my_div中放入img的標籤且把src指定為圖片的名稱加上亂數產生出來的數字，醬就能做出第一種的的效果了。

第二種：

以下為《JS》原始碼

<script type="text/javascript"> 
<!-- 
    //宣告圖片陣列 
    var myImg = new Array("banner0.gif","banner1.gif","banner2.gif","banner3.gif","banner4.gif"); 

    function showImg(){ 
    //乘以陣列的長度以取得從0~(陣列長度-1)的數字 
    var imgIndex = Math.floor(Math.random()*myImg.length); 
        document.getElementById("my_div").innerHTML  = "<img src='"+myImg[imgIndex]+"'>"; 
    } 
//--> 
</script>

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

第三種：

以下為《JS》原始碼

<script type="text/javascript"> 
<!-- 
    //宣告圖片陣列 [圖片檔名,連結網址] 
    var myImg = new Array(["banner0.gif","blog.xuite.net/abgne/diary1"],["banner1.gif","blog.xuite.net/abgne/diary1"],["banner2.gif","blog.xuite.net/abgne/diary1"],["banner3.gif","blog.xuite.net/abgne/diary1"],["banner4.gif","blog.xuite.net/abgne/diary1"]); 
     
    function showImg(){ 
    //乘以陣列的長度以取得從0~(陣列長度-1)的數字 
    var imgIndex = Math.floor(Math.random()*myImg.length); 
        document.getElementById("my_div").innerHTML  = "<A HREF='http://"+myImg[imgIndex][1]+"'><img src='"+myImg[imgIndex][0]+"' border='0'></A>"; 
    } 
//--> 
</script>