js图片过渡效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js图片过渡效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>abc</title>
<style type="text/css">
img {border:0px;}
</style>
</head>
<body>
<div>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <div id=oTransContainer style="filter: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 165px; HEIGHT: 103px"><a href="#" ><img class=pic id=oDIV1 src="images/01.jpg" width=788 height=150>
<script>var NowFrame = 1;var MaxFrame = 5;var bStart = 0;function fnToggle(){var next = NowFrame + 1;if(next == MaxFrame+1) {NowFrame = MaxFrame;next = 1;}if(bStart == 0){bStart = 1;setTimeout('fnToggle()', 2000);return;}else{oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}}	setTimeout('fnToggle()', 6000);}fnToggle();</script>
</a>
<a href="#" ><img class=pic id=oDIV2 src="images/02.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href="#" ><img class=pic id=oDIV3 src="images/03.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href="#" ><img class=pic id=oDIV4 src="images/04.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href="#" ><img class=pic id=oDIV5 src="images/05.jpg" width=788 height=150 style="DISPLAY: none;"></a>
  </div></td>
  </tr>
</table>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)