pic

最新推荐文章于 2026-06-17 10:40:45 发布

原创最新推荐文章于 2026-06-17 10:40:45 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#object #filter #javascript #function #html

该博客展示了使用HTML和JavaScript实现顺序显示图片的方法。通过HTML标签插入多张图片，并设置初始透明度，利用JavaScript函数动态改变图片透明度，实现图片按顺序显示的效果，每隔200毫秒更新一次。

<HTML>
<HEAD>
<TITLE> 顺序显示图片 </TITLE>
</HEAD>
<BODY>
<IMG name="object1" SRC="17252405981.jpg" style="filter:alpha(opacity=10)" >
<IMG name="object2" SRC="17252405981.jpg" style="filter:alpha(opacity=10)" >
<IMG name="object3" SRC="17252405981.jpg" style="filter:alpha(opacity=10)" >
<IMG name="object4" SRC="17252405981.jpg" style="filter:alpha(opacity=10)" >
<IMG name="object5" SRC="17252405981.jpg" style="filter:alpha(opacity=10)" >
<IMG name="object6" SRC="17252405981.jpg" style="filter:alpha(opacity=10)" >
</BODY>
<script language="javaScript">
var count = 0;
function goInorder(){
  document.object1.filters.alpha.opacity=10;
  object2.filters.alpha.opacity=20;
  object3.filters.alpha.opacity=30;
  object4.filters.alpha.opacity=40;
  object5.filters.alpha.opacity=50;
  object6.filters.alpha.opacity=60;
  if (count%6 == 0){
  document.object1.filters.alpha.opacity=100;
  }else if(count%6 == 1){
  document.object2.filters.alpha.opacity=100;
  }else if(count%6 == 2){
        document.object3.filters.alpha.opacity=100;
  }else if(count%6 == 3){
  document.object4.filters.alpha.opacity=100;
  }else if(count%6 == 4){
  document.object5.filters.alpha.opacity=100;
  }else if(count%6 == 5){
  document.object6.filters.alpha.opacity=100;
  }
  count++;
setTimeout("goInorder()",200);
}
goInorder();
</script>
</HTML>