您的位置：首页 > Web前端 > JavaScript

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

2014-11-03 15:41 477 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航