您的位置: 首页 > 软件教程 > Javascript教程专题 > 巧使网页图片实现“幻灯片”显示效果

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

7.3分
出处:网络 时间:2011-05-04

您可能感兴趣的话题: JavaScript  

核心提示:Blendtrans滤镜可以使图片产生淡入淡出的幻灯效果

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

 

网友评论
多特网友 2013-04-14 10:03:46 回复
好坑啊。。。。。。。。。。。。
多特网友 2012-03-25 16:18:19 回复
可以;我在试试
多特网友 2011-09-16 13:40:29 回复
.。。。。。。。。
多特网友 2013-04-14 10:03:46 回复
好坑啊。。。。。。。。。。。。
多特网友 2011-09-16 13:40:29 回复
.。。。。。。。。
多特网友 2012-03-25 16:18:19 回复
可以;我在试试
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
Dreamweaver是网页制作和管理的所见... [详细]