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

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

  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="复制代码"]

 

文章内容来源于网络,不代表本站立场,若侵犯到您的权益,可联系我们删除。(本站为非盈利性质网站) 联系邮箱:rjfawu@163.com
多特网友 2013-04-14 10:03:46 回复
好坑啊。。。。。。。。。。。。
多特网友 2012-03-25 16:18:19 回复
可以;我在试试
多特网友 2011-09-16 13:40:29 回复
.。。。。。。。。
多特网友 2011-09-16 13:40:29 回复
.。。。。。。。。
多特网友 2012-03-25 16:18:19 回复
可以;我在试试
多特网友 2013-04-14 10:03:46 回复
好坑啊。。。。。。。。。。。。