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秒钟轮转一次。
转载于:https://www.cnblogs.com/ywqu/archive/2010/10/30/1864875.html
Jquery打造AdRotator轮转图片相关推荐
- 使用jquery打造一个动态的预览产品颜色效果
在浏览一些电子商务网站的时候,选择一件产品的时候,我们经常会看到点击衣服的颜色,同一件衣服的颜色就会切换,让我们觉得真是比较有意思,这样做的效果给用户的体验比较好,今天就给大家分享一下这种效果的实现原 ...
- JQUERY打造隐藏在左侧的弹性弹出菜单
代码简介: 隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JAvaScript缓冲动画的典型教程.本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内 ...
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
- html 传参数 菜单自动展开,【HTML5】Jquery打造竖向伸缩/展开菜单
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 效果图如下: jquery打造竖向伸缩/展开菜单 body { font-family: Arial; font-size: 16px; } dl { w ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --><div id= ...
- 宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程
本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库 构建html 整个代码分为三部分: 1.加载部分loadding : 2. ...
- php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- html5伸缩效果,【HTML5】Jquery打造竖向伸缩/展开菜单
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 效果图如下: jquery打造竖向伸缩/展开菜单 body { font-family: Arial; font-size: 16px; } dl { w ...
- php js 图片旋转,jQuery实现可以控制图片旋转角度效果
本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下:/p> "http://www.w3.org/TR/xhtm ...
- JQuery修改background-image背景图片
JQuery修改background-image背景图片 使用: var src = ' ../resource/images/top-img.png'; $("#videoCoverLay ...
最新文章
- 下载kaggle数据集的小妙招
- C#事件-自定义事件
- 程序员|刚毕业,我该去小公司还是该去大公司
- TensorFlow 教程 --进阶指南--3.2变量:创建、初始化、保存和加载
- python数据分析-如何在业余时学数据分析?
- Prefer copy Over retain
- 重走JAVA之路(四):ThreadLocal源码解析
- win7+vs2015+pcl1.8.0配置
- 鸿蒙系统首发仪式,鸿蒙系统首发终端荣耀智慧屏正式亮相
- 消灭内存不能为read或written等错误
- OpenNI XnSkeletonJointOrientation 簡單分析
- Oracle 学习资料汇总
- 火狐浏览器50Linux32位,火狐浏览器32位完整离线安装包下载
- turtle库使用教程 及 绘制 浪漫樱花 五角星 彩虹玫瑰 谢尔宾斯基三角形 实例
- 全数字实时仿真平台SkyEye经典案例——卫星
- C#入门小练习2储蓄计算器程序
- HTML中的meta的属性作用
- 1.Adobenbsp;CS6nbsp;系列,安装…
- 服务器通过笔记本共享网络
- 六、数据结构笔记:树[一](基本知识与存储方式)
热门文章
- Collectors.toSet()
- 东华大学计算机学院刘国华,计算机科学与技术学院2016级迎新大会顺利举行
- springcloud断点续传源码_SpringCloud 超大文件上传和断点续传的实现
- python打开word内对象_Python操作Word:常用对象介绍
- 【渝粤教育】国家开放大学2018年秋季 0692-21T化工设备机械基础 参考试题
- 贪心算法小记——代理服务器
- 彩虹战队waf测试工具(测试数据)
- c语言名著摘抄——语法及实例
- Oh-My-Zsh 下远程ssh的乱码问题
- 在Spring Boot中使用Spring Security实现权限控制