图片链接轮换代码, 支持预载
作者：潇洒 来源：潇洒人生 时间：2007-10-16 19:57:00
加班时抽空弄的，javascript图片链接定时轮换，自适应图片大小，支持预载，进行了简单封装，方便调用。
发现自己还是菜得很，一个简单效果被我写得这么复杂…… 我还真有点佩服自己。-.-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>图片链接轮换代码, 支持预载</title>
</head>
<script language="JavaScript">
<!--
function iScroll(pics, itv, target)
{
var me = this;
this.curIdx = 0;
this.target = target;
this.sources = pics;
var o = this.sources;
for (var i=0; i<o.length; i++)
{
var cur = o[i];
var img = new Image();
img.src = cur.i;
cur.i = img;
cur.w = img.width+'px';
cur.h = img.height+'px';
}
this.doScroll();
setInterval(function()
{
me.curIdx ++;
if(me.curIdx == o.length) me.curIdx = 0;
me.doScroll(me.curIdx);
}
, itv );
}
iScroll.prototype.doScroll = function()
{
var i = this.target;
var cur = this.sources[this.curIdx];
i.style.width = cur.w;
i.style.height = cur.h;
i.style.background = 'url('+cur.i.src+')';
i.href = cur.u;
i.onclick = function(){ open(this.href); return false; }
}
window.onload=function()
{
var itv = 3000;
var o = [
{'i':'http://www.google.cn/intl/zh-CN/images/logo_cn.gif', 'u':'http://www.googel.com'},
{'i':'https://www.aspxhome.com/images/logo.gif', 'u':'http://www.aspxhome.com'}
];
var target = document.getElementById('imgLink');
(new iScroll(o, itv, target));
}
//-->
</script>
<style>
#imgLink { display:block; }
</style>
<body>
<a href="#" id="imgLink"></a>
</body>
</html>
图片链接轮换查看效果：
标签：图片,轮换,预载
0
投稿猜你喜欢
发布淘宝开源编辑器 KISSY Editor 1.0.0
2009-10-27 16:20:00
如何在MySQL数据库中使用XML数据
2009-12-29 10:48:00
Mini，又个 Javascript 选择器
2009-10-06 14:48:00
Cookies 欺骗漏洞的防范方法(vbs+js 实现)
2011-03-09 11:09:00
asp里Sub与Function有什么区别
2007-08-17 10:39:00
sql server not in 语句使程充崩溃
2012-01-05 19:05:00
asp textarea 多行数组分割处理方法
2011-03-03 10:55:00
MySQL的root密码丢失解决方法
2011-05-05 15:56:00
thinkphp5实用入门进阶知识点和各种常用功能代码汇总
2023-05-25 02:48:34
DreamweaverMX 2004打造细线表格
2008-10-01 09:39:00
XML卷之实战锦囊（1）：动态排序
2008-09-05 17:20:00
谈点关于checkbox的事情
2010-09-28 14:49:00
解读MySQL的InnoDB引擎日志工作原理
2011-01-04 19:59:00
纯CSS在Firefox模拟text-overflow: ellipsis效果
2009-03-17 12:49:00
SQL Server中ISNULL函数介绍
2009-09-09 21:23:00
在 SQL Server 数据库开发中的十大问题
2009-07-02 16:39:00
asp无组件备份与还原数据库
2007-09-24 13:19:00
ASP 操作cookies的方法
2011-03-10 11:24:00
SQL Server数据在不同数据库中的应用
2008-12-24 15:34:00
Sql Server、Oracle以及Access数据库 判断字段是否为空的办法 (From calmzeal's code life)
2011-02-24 19:44:00