欢迎访问 licqi IT技术
我们一直在努力

Jquery打造AdRotator轮转图片

 

Asp.net中的AdRotator是一个非常有用的随机显示广告的控件,不足的地方是,每次用户刷心页面,广告随机一次,哪有没有办法页面不刷新,广告每隔一段时间自动翻转呢?答案是肯定的,而且用jquery 很容易实现,接下来我们看一下如何来实现以上说的效果。
1、新建网站
新建一个网站或者在已有的网站中做添加以下文件和文件夹
新增四张图片和Ad.xml文件,供AdRotator控件调用。
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:通过此属性过滤广告,对应XML文件中的keyword属性,这样不同的页面可以使用此属性过滤一些广告内容。
4、Jquery轮转图片
使用jquery使AdRotator控件中的图片轮转起来,代码如下:
    <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>
引用:Load(function)
在每一个匹配元素的load事件中绑定一个处理函数。如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。
为了验证是否刷心页面,在页面上加了一个时间标志。
最终运行效果如下:
有以上图可以知,整个页面并没有刷心。可以自由地每隔3秒钟轮转一次。
赞(0) 打赏
未经允许不得转载:licqi IT技术 » Jquery打造AdRotator轮转图片
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏