图片滚动效果——左右

<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>

    <!--向右滚动代码结束-->