javascript+xml实现简单图片轮换(只支持IE)


Posted in Javascript onDecember 23, 2012

最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东.

xml文件:test.xml

<?xml version="1.0" encoding="gb2312"?> 
<ad> 
<neteasy path="image/64_jpg.jpg">http://www.163.com</neteasy> 
<sina path="image/lining.jpg">http://www.sina.com.cn</sina> 
<sohu path="image/Image00045.jpg">http://www.sohu.com</sohu> 
</ad>

HTML
<img id="image1" name="image1" src="image/64_jpg.jpg" style="cursor:hand; width: 110px; height: 103px;"/>

javascript
<script> 
//图片轮换 
var a = 0 ; 
var xmlDoc; 
var image1 = document.getElementById("image1"); 
function loadxml(path) 
{ 
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
xmlDoc.async = false; 
xmlDoc.load(path); 
} 
loadxml("test.xml"); 
function changeImage() 
{ 
var ad = xmlDoc.getElementsByTagName("ad")[0]; 
if(a == ad.childNodes.length) 
{ 
a=0; 
} 
var path = ad.childNodes[a].getAttribute("path"); 
var url = ad.childNodes[a].text; 
image1.src = path; 
image1.onclick = function(){window.open(url);}; 
a+=1; 
setTimeout("changeImage()",1000); 
} 
changeImage(); 
</script>
Javascript 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript与DOM组合动态创建表格实例
Dec 23 #Javascript
JavaScript执行效率与性能提升方案
Dec 21 #Javascript
JS实现图片预加载无需等待
Dec 21 #Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 #Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 #Javascript
js返回上一页并刷新代码整理
Dec 21 #Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
带你了解python装饰器
2017/06/15 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
postman和python mock测试过程图解
2020/02/22 Python
如何写python的配置文件
2020/06/07 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
什么是方法的重载
2013/06/24 面试题
中专生自荐信
2014/06/25 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
新学期开学标语2015
2015/07/16 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python