javascript 图片左右移动 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>