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

最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持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>

时间: 2024-10-28 19:21:08

javascript+xml实现简单图片轮换(只支持IE)_javascript技巧的相关文章

js实现的简单图片浮动效果完整实例_javascript技巧

本文实例讲述了js实现的简单图片浮动效果.分享给大家供大家参考,具体如下: 利用window对象,实现一个图片的浮动效果 1.现有一个广告div,就是我们要控制的,它的起始点(0,0) 2.设定横向和纵向的速度 3.控制广告div移动   1)广告div是否达到边界   2)如果到达边界后,我们设置速度反向移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

封装了一个js图片轮换效果的函数_javascript技巧

其中如果有问题,有更好的意见或者建议都可在最后留言,都将对您感激不尽. 具体的代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>图片轮换效果</title> <style type="t

JavaScript模仿Pinterest实现图片预加载功能_javascript技巧

前言 对于Pinterest网站,从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局.但是今天,给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节. 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果. 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会

javascript 另一种图片滚动切换效果思路_javascript技巧

先说一种最普遍的思路: 把图片们用ul之类的包起来,并设置float.然后设置这个ul本身为absolute定位,其父标签用relative定位.通过设置ul的left或top值,实现图片队列的滚动效果 特点: 只操作一个html元素(即上文的ul),对系统开销小:滚到头会回滚:从大序号滚动到小序号也会回滚:从最后序号滚动到第一个,会"咻"的一下把所有中间的图片也路过一次. 另一种思路就是我在XScroll.js里实现的思路,所有图片用绝对定位.具体看那篇文章吧. XScroll.js

javascript瀑布流式图片懒加载实例_javascript技巧

最近项目使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: /** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight

javascript制作的简单注册模块表单验证_javascript技巧

一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar

javascript之通用简单的table选项卡实现(二)_javascript技巧

回归原始,当样式切换后,把控制权还给页面,即table.js仅控制切换样式和记录操作: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

JavaScript实现将xml转换成html table表格的方法_javascript技巧

本文实例讲述了JavaScript实现将xml转换成html table表格的方法.分享给大家供大家参考.具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i couldnt find a way to parse xml string to xml node // so i parse xml string to xml documen

javascript解析xml实现省市县三级联动的方法_javascript技巧

本文实例讲述了javascript解析xml实现省市县三级联动的方法.分享给大家供大家参考.具体实现方法如下: (该方法适用于任何常用浏览器) <body> <div> <span> <select id="sheng" style="width: 100px"></select> </span> <span> <select id="shi" style=