图片链接轮换代码, 支持预载
作者：潇洒 来源：潇洒人生 发布时间：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
投稿猜你喜欢
* 前，我在公司做设计，当时就已经做到技术总监，Photoshop是自学的，当时觉得全世界比我Photoshop强的人也不在多数。七年前，- ASP实现防止网站被采集代码如下:<％ Dim AppealNum,AppealCount Appeal
- 购物车是电子商务网站中不可缺少的组成部分，但目前大多数购物车只能作为一个顾客选中商品的展示，客户端无法将购物车里的内容提取出来满足自己事务处
- 最近一个项目中遇到ASP对FoxPro库表(*.DBF)的操作问题。现实中确有许多应用软件使
- 有些时间没更新blog了，这两天为了更新<code collection>，于是重写了语法高亮的模块，这次是一个引擎，你可以根据
- 用CSS+DIV编写的实现在网页中显示圆角矩形的代码！希望对大家有用！谢谢支持！以下为CSS代码：<style> div.bg{
- 记录应用程序的操作日志可以使用数据库、文本文件、XML文件等。我这里介绍的是使用 XML 文件记录操作日志。我觉得使用 XML 记录操作日志
- WEB标准，从我大二开始接触到毕业后的第一份工作“页面重构工程师”，从接触标准到蓝色理想标准区版主的四年多时间里，WEB标准已经成为我生活中
- SQL Server 的扩展存储过程，其实就是一个普通的 Windows DLL,只不过按照某种规则实现了某些函数而已。近日在写一个扩展存储
- 看了一个月的文档和资料以后，终于让我参与到项目中来了，哈哈，痛快！虽然只是让我解决一个小问题，不过有活干就是好。在写代码的过程中遇到了一个小
- 批量修改： EXEC sp_MSforeachtable 'exec sp_changeob
- SQL Server中事务日志的作用：持续记录数据库所有的事务和这些事务对数据库所做的修改;一旦数据库出现灾难事件，就需要事务日志来进行近期
- DEMO:var testobj = document.getElementById("test&q
- 代码如下:Create PROCEDURE Batch_Delete @TableName nvarchar(100), --表
- 在数据库开发过程中，当你检索的数据只是一条记录时，你所编写的事务语句代码往往使用SELECT INSERT 语句。但是我们常常会遇到这样情况
- 如何让图片自动缩放以适合界面大小，拿出你的Editplus，打开c_function.asp文件，找到UBBCode函数，在第417行有如下
- 以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼
- 本文中介绍了一个MySQL的存储过程，其中涉及Cursor的使用，示例如下：CREATE PROCEDURE `justifyGroupNu
- 因为我们现在的前端框架做性能优化，为了找到各个组件及框架的具体解析耗时，需要在框架中嵌入一个耗时测试工具，性能测试跟不同的计算机硬件配置有很
- 这是一家游戏公司，他面试通过后 擅长的机试却没答出来，不过还是被录用了。这道题内容大概这样有条蛇它长度不固定，蛇头朝北顺时针盘旋着，请打印出
