图片滚动效果——左右

<style>
    #colee_left, #colee_right {
        overflow: hidden;
        height: 200px;
        width: 600px;
        margin-left: 300px;
    }
</style>
    <h2>下面是向左滚动</h2>
    <div id="colee_left" >
        <table cellpadding="0" cellspacing="0" border="0">
            <tr><td id="colee_left1" valign="top" align="center">
                    <table cellpadding="2" cellspacing="0" border="0">
                        <tr align="center">
                            <td><p><img src="Image/1.png"></p></td>
                            <td><p><img src="Image/2.png"></p></td>
                            <td><p><img src="Image/3.png"></p></td>
                            <td><p><img src="Image/4.png"></p></td>
                        </tr>
                    </table>
                </td>
                <td id="colee_left2" valign="top"></td>
            </tr>
        </table>
    </div>
    <script>
        //使用div时，请保证colee_left2与colee_left1是在同一行上.
        var speed = 10; //速度数值越大速度越慢 与下面的对比
        var colee_left2 = document.getElementById("colee_left2");
        var colee_left1 = document.getElementById("colee_left1");
        var colee_left = document.getElementById("colee_left");
        colee_left2.innerHTML = colee_left1.innerHTML;

        function Marquee3() {
            if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) //offsetWidth 是对象的可见宽度
                colee_left.scrollLeft -= colee_left1.offsetWidth; //scrollWidth 是对象的实际内容的宽，不包边线宽度
            else {
                colee_left.scrollLeft++;
            }
        }

        var MyMar3 = setInterval(Marquee3, speed);
        colee_left.onmouseover = function () { clearInterval(MyMar3) }
        colee_left.onmouseout = function () { MyMar3 = setInterval(Marquee3, speed) }
    </script>
    <!--向左滚动代码结束-->
<br>

    <h2>下面是向右滚动</h2>
    <div id="colee_right" >
        <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td id="colee_right1" valign="top" align="center">
                    <table cellpadding="2" cellspacing="0" border="0">
                        <tr align="center">
                            <td><p><img src="Image/1.png"></p></td>
                            <td><p><img src="Image/2.png"></p></td>
                            <td><p><img src="Image/3.png"></p></td>
                            <td><p><img src="Image/4.png"></p></td>
                        </tr>
                    </table>
                </td>
                <td id="colee_right2" valign="top"></td>
            </tr>
        </table>
    </div>
    <script>
        var speed = 30; //速度数值越大速度越慢
        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_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>
    <!--向右滚动代码结束-->