利用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好，变换的动作过于生硬