2011-10-29

Javascript 輪播廣告

阿舍的這個網誌是用 Google 的 Blogger.com 來架的,所以,Google Adsense 就會受限於最多只能有三個圖文廣告的限制,因此,就算有位置也不能放 Google Adsense 的廣告,但是,阿舍還有其它家給的廣告可以放,但是,這些廣告不會自動輪播,阿舍不想讓它1一直顯示同一張圖片,就想要弄個輸播的工具來用用,結果,試了幾套都不合阿舍的意,所以,阿舍就決定自已來弄看看好...


阿舍想要的功能很簡單,就是每次訪客進來的時候,可以隨機的跳不同的廣告出來,不需要用到 Server 端的程式和資料庫的,所以,只要用到 Javascript 應該就可以寫出來的,阿舍個人比較喜歡用 dojo,然後,沒有學過 jQuery,因此,就用 dojo 弄出下面的程式碼來,不過,這個程式不用 dojo 也是寫的出來的,只是...阿舍比較懶哩 ! ^^

<script type="text/javascript">
    //<![CDATA[
      var ad1 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
      var ad2 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
      var ad3 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
     
      dojo.addOnLoad(function() {
        var adNum = 3 ;
        var adDiv = “rotatorAD”;
        var ad = "ad" + Math.floor(Math.random()*(adNum-1+1)+1);
        dojo.byId(adDiv).innerHTML = eval( ad ) ;
      });
      //]]>
</script>

阿舍的這個程式的作法是先把要顯示的廣告的網址依序指定給 ad1、ad2、ad3 等變數,然後,再用亂數(這個亂數的取法是參考自「低溫烘培」的這篇文的) 來取出 1~3 之間的一個數字來和 "ad” 字串組出要顯示的變數名稱,然後,再透過 dojo 取到要放廣告的 DIV,再經由「innerHTML」塞廣告的 HTML 碼。

如果你有需要用的話,首先要依序定出 ad 變數來放你所有的廣告程式碼 ( 設定之前,要先把廣告程式碼的 " 轉換成 ' ),然後,把 adNum 設成你的 ad 變數的數量,以阿舍有 ad1 ~ ad3 共三個,所以,adNum 就指定為 3,接著,再把 adDiv 設成你要放廣告的那個 Div 的 id 名稱,以阿舍的 Div 的 id 為 "rotatorAD” 例, adDvi 就指定為 “rotatorAD”,都指定完成之後,就把這段程式碼放到網頁裡的 <head> 和 </head> 之間。

如果你從來都沒有用過 dojo,那麼你就需要在<head> 和 </head> 之間,多加入下面這一行,另外,如果不是和阿舍一樣是用 Blogger 的服務的話,上面程式碼中的「//<![CDATA[」 和 「//]>」就可以移除,這個是專門給 Blogger 的範本用的哩 ! 如果要看範例,右邊這個大條的廣告就是用這個程式碼弄出來的哩 ! 每次更新網頁,應該是都會不一樣的吧 !

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>

完整的網頁程式碼如下:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
        <script type="text/javascript">
            //<![CDATA[
              var ad1 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
              var ad2 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
              var ad3 ="<a href='http://arthurtodat.com'><img src='http://drupal.soa.tw/ayuhead.jpg'/></a>";
             
              dojo.addOnLoad(function() {
                var adNum = 3;
                var adDiv = "rotatorAD";
                dojo.require("dojox.math");
                var ad = "ad" + Math.floor(Math.random()*(adNum-1+1)+1);
                dojo.byId(adDiv).innerHTML = eval( ad ) ;
              });
              //]]>
        </script>
</head>
<body>
<div id="rotatorAD"></div>
</body>
</html>


[+] Ubuntu 指令新手會用到的35個技法 - 這是以阿舍的使用經驗編寫出來的電子書,三天內應該就看的完,學的起來哩 ! 有空就參考一下囉 ! ... ^^=

關於阿舍

好文不藏私,請多分享囉!! ^^=



沒有留言 :

張貼留言

如果留言後,發現留言不見了,這通常是因為 Goolge 把它認為是垃圾留言了,請用信件通知阿舍調整 ( ayubiz@gmail.com )。謝謝 !