首页 > 代码库 > 无缝滚动--水平方向
无缝滚动--水平方向
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片跑马灯</title>
</head>
<body>
<div id="colee_right" style="overflow:hidden;width:960px;margin:20px auto;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tbody>
<tr align="center">
<td><a href="http://www.haier.com/cn/" target="_blank"><img src="http://www.mamicode.com/images/haier_logo.png"></a></td>
<td><a href="http://www.tongshuai.com/" target="_blank"><img src="http://www.mamicode.com/images/ts_logo.png"></a></td>
<td><a href="http://www.geeya.cn/" target="_blank"><img src="http://www.mamicode.com/images/jykj_logo.png"></a></td>
<td><a href="http://www.jiuzhou.com.cn/" target="_blank"><img src="http://www.mamicode.com/images/jz_logo.png"></a></td>
<td><a href="http://www.coupoint.net/" target="_blank"><img src="http://www.mamicode.com/images/klc_logo.png"></a></td>
<td><a href="http://shop.coolpad.cn/" target="_blank"><img src="http://www.mamicode.com/images/kp_logo.png"></a></td>
<td><a href="http://www.rapoo.cn/" target="_blank"><img src="http://www.mamicode.com/images/lp_logo.png"></a></td>
<td><a href="http://www.sumavision.com/" target="_blank"><img src="http://www.mamicode.com/images/smsx_logo.png"></a></td>
<td><a href=" http://www.lefant.com.cn/" target="_blank"><img src="http://www.mamicode.com/images/lf_logo.png"></a></td>
<td><a href=" http://www.yuandaocn.com/" target="_blank"><img src="http://www.mamicode.com/images/yd_logo.png"></a></td>
<td><a href="http://www.mobee.tv/" target="_blank"><img src="http://www.mamicode.com/images/wpt_logo.png"></a></td>
<td><a href="http://www.egreatworld.com/" target="_blank"><img src="http://www.mamicode.com/images/ygr_logo.png"></a></td>
</tr>
</tbody>
</table>
</td>
<td id="colee_right2" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var speed=3//速度数值越大速度越慢
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML;
function Marquee4(){
/*向左滚动*/
if(colee_right2.offsetWidth-colee_right.scrollLeft<=0){
colee_right.scrollLeft-=colee_right2.offsetWidth ;
}else{
colee_right.scrollLeft++;
}
/*向右滚动*/
/*if(colee_right.scrollLeft<=0){
colee_right.scrollLeft+=colee_right2.offsetWidth ;
}else{
colee_right.scrollLeft--;
}*/
}
var MyMar4=setInterval(Marquee4,speed);
colee_right.onmouseover=function(){
clearInterval(MyMar4);
}
colee_right.onmouseout=function(){
MyMar4=setInterval(Marquee4,speed);
}
</script>
</body>
</html>