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

来源:网络时间:2011-05-04

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

  制作过程:

 

  一、准备图片10张,文件名为0.jpg9.jpg

 


 

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

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

  三、将下列代码放到<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="复制代码"]

 

发表评论

最新评论(共3条)

2345市网友

好坑啊。。。。。。。。。。。。

2013-04-14 0

回复@2345网友:

  • 取消

2345市网友

可以;我在试试

2012-03-25 0

回复@2345网友:

  • 取消

2345市网友

.。。。。。。。。

2011-09-16 0

回复@2345网友:

  • 取消