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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
js日期联动示例
May 02 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
理解javascript对象继承
Apr 17 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
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
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
Seajs源码详解分析
2019/04/02 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Python出现segfault错误解决方法
2016/04/16 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
毕业生面试求职信
2014/06/23 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
给病人的慰问信
2015/03/23 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
如何使用PyCharm及常用配置详解
2021/06/03 Python