yilin 的程式日記: [ASP.Net] 廣告輪播的控制項 (without AJAX)

由於最近要在網頁上加入一個廣告輪播的功能, 且 AJAX Toolkit 的 SlideShowExtender 又因為 OutputCache, 未能正常地產生輪播效果, 所以我使用 JavaScript 搭配 UserControl 做了以下的範例.

需求: 可進行廣告輪播 (圖片加超連結) 的控制項, 每個廣告切換時, 圖片, 圖片的文字說明, 圖片的超連結這三者需一併切換.

步驟:

新增一個 [Web使用者控制項], 例如 PlayAD.ascx .
控制項的網頁內容如下:
```
<%@ Control Language="C#" AutoEventWireup="true" 
CodeFile="PlayAD.ascx.cs" Inherits="PlayAD" EnableViewState="false" %>
<asp:Literal ID="Literal1" runat="server">
  <a href="#" id="{0}_lnkAd" target="_blank">
  <img style="border:0" alt="廣告圖"/>
  </a>
</asp:Literal>
```
- <a> 的 href 屬性可自行設定預設的超連結.
- 如果要設定廣告圖的寬與高, 可自行設定 <img> 的 width 與 height 屬性.
- 加入 <asp:Literal> 是為了方便控制其內容. 例如: 我要參數化的是 <a> 的 id 屬性, 所以將其設定為 "{0}_lnkAd".

在這個控制項中的程式碼中, 我將廣告圖播放的時間間隔設定成參數, 讓開發者可自行設定. 至於資料來源的部分, 由於可從檔案, 資料庫, 或 HardCode 等方式制定, 所以就不列在這個範例中描述.
控制項的程式碼如下 (廣告依序是 PChome, Yahoo, 我的E政府):

public partial class PlayAD : System.Web.UI.UserControl
{
  //輪播的時間間隔(毫秒:ms)
  private int _PlayInterval;
  public int Interval
  {
    get { return _PlayInterval; }
    set { _PlayInterval = value; }
  }
  protected void Page_Load(object sender, EventArgs e)
  {
    //這個廣告的Key(如果該控制項在一個網頁中會有多個的時候，這個值要能唯一)
    string strName = "myAD";
    //廣告輪播的資料來源，三個為一組，依序是：圖片位置、圖片的說明文字、圖片的超連結位置
    string strAry = "\"http://www.pchome.com.tw/img/pchomelogo.gif\",\"PChome\",\"http://www.pchome.com.tw/\""
    + ",\"http://l.yimg.com/tw.yimg.com/i/tw/hp/mh/08logo.gif\",\"Yahoo\",\"http://tw.yahoo.com/\""
    + ",\"http://www.gov.tw/images/head_logo.jpg\",\"我的E政府\",\"http://www.gov.tw/\"";
    //JavaScript在setTimeout時，要呼叫的函式(第三步會解釋此function)
    string strScript = "playAd({0}, 0, {1}, \"{0}\");";
    Literal1.Text = string.Format(Literal1.Text, strName);
    //在網頁中宣告此資料陣列
    this.Page.ClientScript.RegisterArrayDeclaration(strName, strAry);
    //在網頁中註冊此JavaScript(進行第一次廣告的播放)
    //(注意！這邊要用RegisterStartupScript；用RegisterClientScriptBlock會造成JavaScript在陣列宣告之前，而產生JavaScript的錯誤)
    //有興趣的可以試試中間的差異。
    //另外，不見得要用RegisterArrayDeclaration來宣告陣列，用兜字串的方式去組織JavaScript也可以。
    this.Page.ClientScript.RegisterStartupScript(this.GetType(), strName, string.Format(strScript, strName, this.Interval), true);  
  }
}

將廣告輪播的 JavaScript 置於頁面中. 此 JavaScript 因為是共用的 function, 所以不可置於 UserControl 中.
以下是頁面的網頁碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> 
<%@ Register src="PlayAD.ascx" tagname="PlayAD" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript" language="javascript">
    function playAd(aryImg, intIdx, intInterval, strVar) {
      //找出廣告輪播的<a>
      var objLnk = document.getElementById(strVar + "_lnkAd");
      //找出<a>下的第一個<img>
      var objImg = objLnk.getElementsByTagName("img")[0];
      //判斷是否播放到最後一項。(若超過，就設定至第一個廣告)
      if (intIdx >= aryImg.length) 
      { 
         intIdx = 0; 
      }
      //設定圖片的超連結
      objLnk.href = aryImg[intIdx + 2]; 
      //設定圖片的說明文字
      objImg.alt = aryImg[intIdx + 1]; 
      //設定圖片的URL
      objImg.src = aryImg[intIdx];
      //設定下一次播放的function與時間間隔
      setTimeout("playAd(" + strVar + ", " + (intIdx + 3) + "," + intInterval + ",\"" + strVar + "\")", intInterval);
    }
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <div>    
    <uc1:PlayAD ID="PlayAD1" runat="server" Interval="7000" />    
  </div>
  </form>
</body>
</html>

此 function 的變數說明如下:

aryImg: 廣告輪播資料來源的陣列. 此陣列的變數是 JavaScript 的全域變數(在控制項中設定).
intIdx: 播放的索引. 以三個為一組, 所以每次都是 +3.
intInterval: 下次播放的時間間隔 (毫秒: ms).
strVar: 用來找出 <a> 的索引值。

這邊要注意的是廣告輪播的時間間隔不要太短, 以避免 JavaScript 的 setTimeout 在圖片未載入完成前, 又播放到下一個廣告.

yilin 的程式日記

2010/07/28

[ASP.Net] 廣告輪播的控制項 (without AJAX)

沒有留言: