JS由左向右的图片渐变过渡切换效果

最新推荐文章于 2023-02-04 16:43:15 发布

lazman

最新推荐文章于 2023-02-04 16:43:15 发布

阅读量1.7k

点赞数

分类专栏： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS由左向右的图片渐变过渡切换效果</title>
</head>
<body>
 <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="/" target=_blank>
     <img class=pic id=oDIV1
      style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
      src="/images/m01.jpg" border=0> 
     <script>
      var NowFrame = 1;
      var MaxFrame = 3;
      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="/" target=_blank><img class=pic id=oDIV2
      style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
      src="/images/m02.jpg" border=0></a><a href="/" target=_blank><img
      class=pic id=oDIV3
      style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
      src="/images/m03.jpg" border=0></a>
    </div></td>
  </tr>
 </table>
</body>
</html>

lazman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS由左向右的图片渐变过渡切换效果

JS由左向右的图片渐变过渡切换效果 <table width="778" border="0" align="center" cellpadding="0" cellspacing="0"> <div id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(Gra
复制链接

扫一扫

专栏目录