JavaScript里面可以是用滤镜的功能,这样就能实现图片幻灯片的效果,下面小编给大家讲解下Blendtrans滤镜可以使图片产生淡入淡出的幻灯效果。
JavaScript教程之Blendtrans滤镜的使用
制作过程:
一、准备图片10张,文件名为0.jpg至9.jpg。
二、建立一个CSS样式作为图片边框。
《style》
body img{border:3 gold ridge}
《/style》
三、将下列代码放到《head》间。
《script language=“JavaScript”》《BR》 function ImgArray(len)《BR》 {《BR》 this.length=len;《BR》 }《BR》 ImgName=new ImgArray(10);《BR》 ImgName[0]=“0.jpg”;《BR》 ImgName[1]=“18.jpg”;《BR》 ImgName[2]=“28.jpg”;《BR》ImgName[3]=“3.jpg”;《BR》 ImgName[4]=“4.jpg”;《BR》 ImgName[5]=“5.jpg”;《BR》ImgName[6]=“6.jpg”;《BR》 ImgName[7]=“7.jpg”;《BR》 ImgName[8]=“8.jpg”;《BR》ImgName[9]=“9.jpg”;《BR》 var t=0;《BR》 function playImg()《BR》 {《BR》if (t==9)《BR》 {t=0;}《BR》 else《BR》 {t++;}《BR》img.style.filter=“blendTrans(Duration=3)”;《BR》 img.filters[0].apply();《BR》 img.src=ImgName[t];《BR》 img.filters[0].play();《BR》 mytimeout=setTimeout(“playImg()”,5000);《BR》 }《BR》《/script》《BR》
四、将下列代码放到《body》里。
《body bgcolor=“#FFFFFF” text=“#000000” onload=“playImg()”》
《img src=“0.jpg” width=“96” height=“120” name=“img” 》
……