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

来源:互联网 发布:广告狂人 第三季 知乎 编辑:程序博客网 时间:2024/04/30 05:27
<!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.onmouseover=function() { clearInterval(MyMar3) }   col_left.onmouseout=function() { MyMar3=setInterval(Marquee3,speed) }  </script> 

0 0
原创粉丝点击