【JS】滚动图代码，可以调节速度，调节大小，兼容所有浏览器

原创

catshitone 2022-01-14 16:29:38 博主文章分类：html ©著作权

©著作权归作者所有：来自51CTO博客作者catshitone的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>
</head>
<body>
<div id="col_left" style="overflow:hidden;width:255px;"> 
<table cellpadding="0" cellspacing="0" border="0"> 
<tr>
<td id="col_left1" valign="top" align="center"> 
  <table cellpadding="2" cellspacing="0"border="0">
    <tr align="center"> 
    <td><img  src="01.jpg"></td> 
    <td><img  src="02.jpg"></td> 
    <td><img  src="03.jpg"></td> 
    <td><img  src="04.jpg"></td> 
    </tr>
     </table>
      </td>  <td id="col_left2" valign="top"></td> 
      </tr> 
      </table>
       </div> 
</body>
</html>

<script> 
var speed = 5;
 var  col_left2=document.getElementById("col_left2"); 
 var  col_left1=document.getElementById("col_left1");
 var  col_left=document.getElementById("col_left");  
 col_left2.innerHTML=col_left1.innerHTML;
 function Marquee3(){  
 if(col_left2.offsetWidth-col_left.scrollLeft<=0)
  col_left.scrollLeft-=col_left1.offsetWidth;
   else{  
   col_left.scrollLeft++;
    }
   }
    var MyMar3=setInterval(Marquee3,speed);
   col_left.οnmοuseοver=function() {
   clearInterval(MyMar3)
   }  
   col_left.οnmοuseοut=function() {
   MyMar3=setInterval(Marquee3,speed)
   } 
   </script>