图片从右向左循环滚动

<html>
<head>
</head>
<body>
<div id="con_div" style="overflow:hidden; height:80px; width:420px; color:#ff0000; margin-left:15px;">
<table align="left" cellpadding="0" cellspace="0" border="0">
<tr>
<td id="td01" valign="top">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<a href="#"><img src="befor1.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>         
<td>
<a href="#"><img src="befor2.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor3.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor4.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>
<td>
<a href="#"><img src="befor1.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>         
<td>
<a href="#"><img src="befor2.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor3.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor4.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>
</tr>
</table>
</td>
<td id="td02" valign="top"></td>
</tr>
</table>
</div>
<script>
// 速度数值越大速度越慢
var speed=10;
td02.innerHTML=td01.innerHTML;
function Marquee()
{
    if(td02.offsetWidth-con_div.scrollLeft<=0)
{
    con_div.scrollLeft-=td01.offsetWidth;
}
else
{
    con_div.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
con_div.onmouseover=function() {clearInterval(MyMar)}
con_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

 

你可能感兴趣的:(图片 滚动)