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>

推薦閱讀


有疑問？ 問題還是沒解決嗎? 歡迎下方留言提問和討論 😁

沒有留言 :

張貼留言

歡迎留言提問和討論 .... 😁

訂閱： 張貼留言 ( Atom )