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