巧使网页图片实现“幻灯片”显示效果

时间：2011-05-04 关注公众号来源：网络

　　Blendtrans滤镜可以使图片产生淡入淡出的幻灯效果

　　制作过程：

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

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

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

[code]　　<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>
[/code][button value="复制代码"]

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

[code]<body bgcolor="#FFFFFF" text="#000000" onload="playImg()">
<img src="0.jpg" width="96" height="120" name="img" >[/code][button value="复制代码"]

阅读全文

扫码关注“ 多特资源库 ”

上一篇：Illustrator利用3D功能打造一只酒杯

下一篇：Illustrator绘制精细三维logo

更多更全的软件资源下载

巧使网页图片实现“幻灯片”显示效果

相关攻略