左右图片循环滚动稍作停止然后继续的js代码

发布时间:2020-02-10编辑:脚本学堂
网页中左右图片循环滚动,中间稍停一下,接着继续滚动,js代码实现,再现经典。

有点类似html中的marquee,但比之要强大咯。
有需要的朋友,参考下吧。
 

复制代码 代码示例:
<Script Language="javascript">
   var oState = 'myImg1';
   function filterImg(){
      oDiv.filters[0].Apply();
      switch(oState){
        case 'myImg1' :
          oState = 'myImg2';
          self['myImg1'].style.visibility = 'visible';
          self['myImg2'].style.visibility = 'hidden';
          self['myImg3'].style.visibility = 'hidden';
          break;
        case 'myImg2' :
          oState = 'myImg3';
          self['myImg1'].style.visibility = 'hidden';
          self['myImg2'].style.visibility = 'visible';
          self['myImg3'].style.visibility = 'hidden';
          break;       
        case 'myImg3' :
          oState = 'myImg1';
          self['myImg1'].style.visibility = 'hidden';
          self['myImg2'].style.visibility = 'hidden';
          self['myImg3'].style.visibility = 'visible';
          break;
        default :
          break;
      }
      oDiv.filters[0].Play();
      setTimeout('filterImg()',1500);
   }
</Script>
<body onload="setTimeout('filterImg()',1500);">
<div id="oDiv" style="position:absolute;left:expression(document.body.clientWidth/2-50);top:expression(document.body.clientHeight/2-50);width:100px;height:100px;filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='PUSH',bands=1);">
<a href="http://www.jb200.com"><img id="myImg1" src="http://www.jb200.com/html/images/logos.gif"
style="width:100px;height:100px;visibility:hidden;position:absolute;border:0;top:0px;left:0px;"></a>
<a href="http://www.jb200.com"><img id="myImg2" src=http://www.jb200.com/logos.gif
style="width:100px;height:100px;visibility:hidden;position:absolute;border:0;top:0px;left:0px;"></a>
<a href="http://www.jb200.com"><img id="myImg3" src="http://www.jb200.com/link/images/luanluan.gif  style="width:100px;height:100px;visibility:hidden;position:absolute;border:0;top:0px;left:0px;"></a>
</div>
</body>
</html>