『网站资源』-巧使网页图片实现“幻灯片”显示效果[咿思舞论坛]

以文本方式查看主题

-  咿思舞论坛  (http://bbs.145829.com/index.asp)
--  『网站资源』  (http://bbs.145829.com/list.asp?boardid=8)
----  巧使网页图片实现“幻灯片”显示效果  (http://bbs.145829.com/dispbbs.asp?boardid=8&id=342)

--  作者：admin
--  发布时间：2009/11/11 15:20:39
--  巧使网页图片实现“幻灯片”显示效果
Blendtrans滤镜可以使图片产生淡入淡出的幻灯效果，如下：
<iframe src="wy.files/blendtrans.htm" frameborder="no" width="120" scrolling="no" height="150"></iframe>

　　制作过程：

　　一、准备图片10张，文件名为0.jpg至9.jpg。

　　二、建立一个CSS样式作为图片边框。

　　代码：

<style>
body img{border:3 gold ridge}
</style>

　　三、将下列代码放到<head>间。

　　代码：

　　<script language="JavaScript">
　　function ImgArray(len)
　　{
　　　this.length=len;
　　 }
　　ImgName=new ImgArray(10);
　　ImgName[0]="0.jpg";
　　ImgName[1]="18.jpg";
　　ImgName[2]="28.jpg";
ImgName[3]="3.jpg";
　　ImgName[4]="4.jpg";
　　ImgName[5]="5.jpg";
ImgName[6]="6.jpg";
　　ImgName[7]="7.jpg";
　　ImgName[8]="8.jpg";
ImgName[9]="9.jpg";
　　var t=0;
　　function playImg()
　　{
if (t==9)
　　　{t=0;}
　　 else
　　　{t++;}
img.style.filter="blendTrans(Duration=3)";
　　img.filters[0].apply();
　 img.src=ImgName[t];
　　img.filters[0].play();
　　mytimeout=setTimeout("playImg()",5000);
　　　}
</script>

　　四、将下列代码放到<body>里。

<body bgcolor="#FFFFFF" text="#000000" >
<img src="0.jpg" width="96" height="120" name="img" >