Jquery打造AdRotator轮转图片

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

1、新建网站

新建一个网站或者在已有的网站中做添加以下文件和文件夹

新增四张图片和Ad.xml文件，供AdRotator控件调用。

2、完善Ad.xml文件

撰写广告XML代码，如下图所示：

1. <?xml version="1.0" encoding="utf-8" ?> 
2.  
3. <Advertisements> 
4.  
5.   <Ad> 
6.  
7.     <ImageUrl>001.jpg</ImageUrl> 
8.  
9.     <NavigateUrl>ywqu.cnblogs.com</NavigateUrl> 
10.  
11.     <AlternateText>灵动生活</AlternateText> 
12.  
13.     <Impressions>30</Impressions> 
14.  
15.     <Keyword>森森购物</Keyword> 
16.  
17.   </Ad> 
18.  
19.   <Ad> 
20.  
21.     <ImageUrl>002.jpg</ImageUrl> 
22.  
23.     <NavigateUrl>ywqu.cnblogs.com</NavigateUrl> 
24.  
25.     <AlternateText>灵动生活</AlternateText> 
26.  
27.     <Impressions>30</Impressions> 
28.  
29.     <Keyword>森森购物</Keyword> 
30.  
31.   </Ad> 
32.  
33.   <Ad> 
34.  
35.     <ImageUrl>003.jpg</ImageUrl> 
36.  
37.     <NavigateUrl>ywqu.cnblogs.com</NavigateUrl> 
38.  
39.     <AlternateText>灵动生活</AlternateText> 
40.  
41.     <Impressions>30</Impressions> 
42.  
43.     <Keyword>森森购物</Keyword> 
44.  
45.   </Ad> 
46.  
47.   <Ad> 
48.  
49.     <ImageUrl>004.jpg</ImageUrl> 
50.  
51.     <NavigateUrl>ywqu.cnblogs.com</NavigateUrl> 
52.  
53.     <AlternateText>灵动生活</AlternateText> 
54.  
55.     <Impressions>30</Impressions> 
56.  
57.     <Keyword>森森购物</Keyword> 
58.  
59.   </Ad> 
60.  
61. </Advertisements> 

3、添加AdRotator控件

向页面AdRotatorDemo.aspx添加AdRotator控件，代码如下：

1. <div> 
2.  
3.     <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/Images/AD/Ad.xml" KeywordFilter="森森购物" /> 
4.  
5. </div> 

分析：

         AdvertisementFile：引用广告XML文件

         KeywordFilter：通过此属性过滤广告，对应XML文件中的keyword属性，这样不同的页面可以使用此属性过滤一些广告内容。

4、Jquery轮转图片

使用jquery使AdRotator控件中的图片轮转起来，代码如下：

1. <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
2.  
3. <script type="text/javascript"> 
4.  
5.     $(document).ready(function () { 
6.  
7.         setInterval(function () { 
8.  
9.             $("#AdRotator1").load(location.href + " #AdRotator1", "" + Math.random() + ""); 
10.  
11.         }, 3000); 
12.  
13.     }); 
14.  
15. </script> 

分析：在以上代码中我们使用了setInterval function,也调用了jQuery load() api,以达到每3秒钟更新一次数据。

引用：Load(function)

在每一个匹配元素的load事件中绑定一个处理函数。如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。

为了验证是否刷心页面，在页面上加了一个时间标志。

最终运行效果如下：

有以上图可以知，整个页面并没有刷心。可以自由地每隔3秒钟轮转一次