咿思舞论坛〖软件技术〗『网站资源』 → 巧使网页图片实现“幻灯片”显示效果

自定义搜索

  共有355人关注过本帖树形打印

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

美女呀,离线,留言给我吧!
admin
  1楼 个性首页 | 博客 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:管理员 帖子:853 积分:1008523 威望:1000000 精华:12 注册:2003/12/30 16:34:32
巧使网页图片实现“幻灯片”显示效果  发帖心情 Post By:2009/11/11 15:20:39

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

<iframe src="wy.files/blendtrans.htm" frameborder="no" width="120" scrolling="no" height="150"></iframe>

  制作过程:

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

图片点击可在新窗口打开查看 图片点击可在新窗口打开查看 图片点击可在新窗口打开查看 图片点击可在新窗口打开查看 图片点击可在新窗口打开查看
图片点击可在新窗口打开查看 图片点击可在新窗口打开查看 图片点击可在新窗口打开查看 图片点击可在新窗口打开查看 图片点击可在新窗口打开查看

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

  代码:

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

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

  代码:

  <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>

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

<body bgcolor="#FFFFFF" text="#000000" >
<img src="0.jpg" width="96" height="120" name="img" >

支持(0中立(0反对(0单帖管理 | 引用 | 回复 回到顶部

返回版面帖子列表

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








签名