Jquery打造AdRotator轮转图片

做不一样的自己
161 阅读5分钟
原文链接： click.aliyun.com
  1. 云栖社区>
  2. 博客列表>
  3. 正文

Jquery打造AdRotator轮转图片

橘子红了呐 2018-01-15 11:50:16 浏览34 评论0

javascript 函数 jquery xml utf-8

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

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>

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

引用：Load(function)

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

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

最终运行效果如下：

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



     本文转自灵动生活博客园博客，原文链接：http://www.cnblogs.com/ywqu/archive/2010/10/30/1864875.html ，如需转载请自行联系原作者


版权声明：本文内容由互联网用户自发贡献，版权归作者所有，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：yqgroup@service.aliyun.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

用云栖社区APP，舒服~

【云栖快讯】中办国办印发《推进互联网协议第六版（IPv6）规模部署行动计划》加快推进基于 IPv6 的下一代互联网规模部署，计划指出2025年末中国 IPv6 规模要达到世界第一,阿里云也第一时间宣布了将全面提供IPv6服务，那么在全面部署 IPV6 前，你需要了解都在这儿  详情请点击 评论文章 (0) (0) (0)
分享到:

相关文章

网友评论

avatar
文章
阅读
粉丝