js幻灯片效果

ShadowInWind 2008-04-01 03:01:59

做一个项目中运用到一个幻灯效果，网上查了点资料，自己写了段js代码，但是一移动鼠标图片就变大叉了，有做过这个的前辈指点下，谢谢！
<html>
<head>
<title></title>
<script language="JavaScript">
var scene = new Array();
var indx = 1;
var timeDelay = 1000;
if(document.images)
{
for(var i=1;i<7;i++)
{
scene[i]=new Image();
scene[i].src="C:\WINDOWS\Web\Wallpaper\风景0"+i+".jpg";
}
}

function changescene()
{
var size = scene.length;
if(indx < size)
indx++;
else
indx=1;
document.myImg.src = scene[indx].src;
timeout = setTimeout('changescene()',timeDelay);
}

function stopShow()
{
clearTimeout(timeout);
}
</script>
</head>
<body bgcolor="lightblue">
<a href="javascript:void(null);"
onMouseOver = "return changescene();"
onMouseOut = "return stopShow()">
<img name = "myImg" src = "C:\WINDOWS\Web\Wallpaper\风景01.jpg" align="center"
border=8 width="400" height = "400">
</a><br>
</body>
</html>

...全文

898 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ShadowInWind 2008-04-01

打赏
举报

结贴，我再研究研究，谢谢两位

ShadowInWind 2008-04-01

打赏
举报

用网络路径就行了。。。结果取本地路径还是有问题

ShadowInWind 2008-04-01

打赏
举报

[Quote=引用 1 楼 smartsoloman 的回复:]
if(indx < size)
indx++;
else
indx=1;
这个有问题,
当indx==size-1的时候,indx++,此时scene[indx]是没有值的,所以会出现错误,别的地方问题倒是不大
[/Quote]
改了，还是大差，我也估计是相对/绝对路径的关系,但是就是不知道问题在哪...

muxrwc 2008-04-01

打赏
举报

正好前些天写了一个...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>轻量封装图片轮动</title>

<script lanuage="javascript">

var ImgConvert = function (imgid, linkid) {

//构造参数

	this.imgid = imgid;

	this.linkid = linkid;

	this.cursor = 0;

	this.imgs = [];

};



ImgConvert.prototype = {



	constructor : ImgConvert

	

	, add : function (src, href) {

	//缓存图片

		return (this.imgs[this.imgs.length] = { obj : new Image, "href" : href }).obj.src = src;

	}

	

	, convert : function () {

	//变化

		var obj = this.imgs[this.cursor = this.cursor + 1 < this.imgs.length ? this.cursor + 1 : 0]

			, img = document.getElementById(this.imgid);

		

		if ('undefined' !== typeof img.style.filter) {

		//如果不支持，就不用滤镜

			img.style.filter = "blendTrans", img.filters(0).apply(), img.filters(0).play();

		}

		

		img.src = obj.obj.src, document.getElementById(this.linkid).href = obj.href;

	}

	

	, load : function () {

	//初始化成员

		var img = document.getElementById(this.imgid), i = 0, a = Array.prototype.slice.call(arguments, 0), t;

		

		for (; i < a.length ; i ++) { t = a[i].split('|'), this.add(t[0], t[1]); }

	}

	

};



var wc = new ImgConvert('img', 'link');

wc.load(

	'http://www.google.cn/intl/zh-CN/images/logo_cn.gif|http://www.google.com/'

	, 'http://www.baidu.com/img/logo.gif|http://www.baidu.com/'

	, 'http://www.csdn.net/images/newcsdnlogo.gif|http://www.csdn.net/'

);

window.onload = function () { window.setInterval(function () { wc.convert(); }, 3000); };

</script>

</head>

<body>

<a id="link" href="http://www.google.com/" target="_blank">

	<img id="img" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" border="0" alt="" />

</a>

</body>

</html>