利用Jquery打造AdRotator无刷新变换图片

         Asp.net中的AdRotator是一个非常有用的随机显示广告的控件，不足的地方是，每次用户刷心页面，广告随机一次，哪有没有办法页面不刷新，广告每隔一段时间自动翻转呢？答案是肯定的，而且用jquery 很容易实现，接下来我们看一下如何来实现以上说的效果。

 

1. 建立ad.xml文件作为AdRotato控件的数据源

    此文件放在app_data目录下：

<Advertisements>
  <Ad>
    <ImageUrl>/images/ad/1.png</ImageUrl>
    <NavigateUrl>http://www.microsoft.com</NavigateUrl>
    <AlternateText>Microsoft.com</AlternateText>
    <Keyword>Computers</Keyword>
    <Impressions>80</Impressions>
  </Ad>

  <Ad>
    <ImageUrl>/images/ad/2.png</ImageUrl>
    <NavigateUrl>http://www.microsoft.com</NavigateUrl>
    <AlternateText>Microsoft.com</AlternateText>
    <Keyword>Computers</Keyword>
    <Impressions>80</Impressions>
  </Ad>

  <Ad>
    <ImageUrl>/images/ad/3.png</ImageUrl>
    <NavigateUrl>http://www.microsoft.com</NavigateUrl>
    <AlternateText>Microsoft.com</AlternateText>
    <Keyword>Computers</Keyword>
    <Impressions>80</Impressions>
  </Ad>
</Advertisements>

 

2. 新建asp.net页面，在页面中放入AdRotator控件，并设置其数据源

    <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/App_Data/ad.xml" />

 

3. 利用jquery实现无刷新变换

    <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,也调用了jQuery load() api,以达到每3秒钟更新一次数据。

 

4. 效果图

    略

 

注意：此种方法虽然解决了无刷新变换图片，但是效果没有flash好，变换的动作过于生硬