JS简单的图片左右滚动

<div id="scroll" style="overflow:hidden;width:757px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="scroll1">
<table>
<tr>
<td><a href="#"><img src="~/Images/Product/1.png" /></a></td>
<td><a href="#"><img src="~/Images/Product/2.png" /></a></td>
<td><a href="#"><img src="~/Images/Product/3.png" /></a></td>
<td><a href="#"><img src="~/Images/Product/4.png" /></a></td>
<td><a href="#"><img src="~/Images/Product/5.png" /></a></td>
<td><a href="#"><img src="~/Images/Product/6.png" /></a></td>
<td><a href="#"><img src="~/Images/Product/7.png" /></a></td>
</tr>
</table>
</td>
<td id="scroll2"></td>

</tr>
</table>
</div>

 

 

<script type="text/javascript">

var sc = document.getElementById("scroll");
var sc1 = document.getElementById("scroll1");
var sc2 = document.getElementById("scroll2");
sc2.innerHTML = sc1.innerHTML;
var speed=30;
function Marquee() {
if (sc.scrollLeft >= sc2.offsetWidth) {
sc.scrollLeft -= sc1.offsetWidth;
} else {
sc.scrollLeft++;
}
}
var mar = setInterval(Marquee, speed);

sc.onmouseover = function () { clearInterval(mar); }
sc.onmouseout = function () { mar = setInterval(Marquee, speed);}

</script>