用Jquery輪轉(zhuǎn)Asp.net中AdRotator圖片

Asp.net中的AdRotator是一個非常有用的隨機顯示廣告的控件，不足的地方是，每次用戶刷心頁面，廣告隨機一次，哪有沒有辦法頁面不刷新，廣告每隔一段時間自動翻轉(zhuǎn)呢？答案是肯定的，而且用jquery 很容易實現(xiàn)，接下來我們看一下如何來實現(xiàn)以上說的效果。

1、新建網(wǎng)站

新建一個網(wǎng)站或者在已有的網(wǎng)站中做添加以下文件和文件夾

新增四張圖片和Ad.xml文件，供AdRotator控件調(diào)用。

2、完善Ad.xml文件

撰寫廣告XML代碼，如下圖所示：

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements>

  <Ad>

    <ImageUrl>001.jpg</ImageUrl>

    <NavigateUrl>ywqu.cnblogs.com</NavigateUrl>

    <AlternateText>靈動生活</AlternateText>

    <Impressions>30</Impressions>

    <Keyword>森森購物</Keyword>

  </Ad>

  <Ad>

    <ImageUrl>002.jpg</ImageUrl>

    <NavigateUrl>ywqu.cnblogs.com</NavigateUrl>

    <AlternateText>靈動生活</AlternateText>

    <Impressions>30</Impressions>

    <Keyword>森森購物</Keyword>

  </Ad>

  <Ad>

    <ImageUrl>003.jpg</ImageUrl>

    <NavigateUrl>ywqu.cnblogs.com</NavigateUrl>

    <AlternateText>靈動生活</AlternateText>

    <Impressions>30</Impressions>

    <Keyword>森森購物</Keyword>

  </Ad>

  <Ad>

    <ImageUrl>004.jpg</ImageUrl>

    <NavigateUrl>ywqu.cnblogs.com</NavigateUrl>

    <AlternateText>靈動生活</AlternateText>

    <Impressions>30</Impressions>

    <Keyword>森森購物</Keyword>

  </Ad>

</Advertisements> 

3、添加AdRotator控件

向頁面AdRotatorDemo.aspx添加AdRotator控件，代碼如下：

    <div>

        <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/Images/AD/Ad.xml" KeywordFilter="森森購物" />

    </div>

分析：

         AdvertisementFile：引用廣告XML文件

         KeywordFilter：通過此屬性過濾廣告，對應(yīng)XML文件中的keyword屬性，這樣不同的頁面可以使用此屬性過濾一些廣告內(nèi)容。

4、Jquery輪轉(zhuǎn)圖片

使用jquery使AdRotator控件中的圖片輪轉(zhuǎn)起來，代碼如下：

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            setInterval(function () {

                $("#AdRotator1").load(location.href + " #AdRotator1", "" + Math.random() + "");

            }, 3000);

        });

    </script>

分析：在以上代碼中我們使用了setInterval function,也調(diào)用了jQuery load() api,以達(dá)到每3秒鐘更新一次數(shù)據(jù)。

引用：Load(function)

在每一個匹配元素的load事件中綁定一個處理函數(shù)。如果綁定給window對象，則會在所有內(nèi)容加載后觸發(fā)，包括窗口，框架，對象和圖像。如果綁定在元素上，則當(dāng)元素的內(nèi)容加載完畢后觸發(fā)。注意:只有當(dāng)在這個元素完全加載完之前綁定load的處理函數(shù),才會在他加載完后觸發(fā)。如果之后再綁定就永遠(yuǎn)不會觸發(fā)了。所以不要在$(document).ready()里綁定load事件，因為jQuery會在所有DOM加載完成后再綁定load事件。

為了驗證是否刷心頁面，在頁面上加了一個時間標(biāo)志。

最終運行效果如下：

有以上圖可以知，整個頁面并沒有刷心。可以自由地每隔3秒鐘輪轉(zhuǎn)一次。