JavaScript- 图片无缝滚动

　　图片向上、向下、向左、向右不间断无缝滚动.

　　图片向下滚动：

<div id="colee" style="overflow: hidden; height: 253px; width: 410px;">
            <div id="colee1">
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
            </div>
            <div id="colee2">
            </div>
        </div>
        <script type="text/javascript">
            var speed = 30;
            var colee2 = document.getElementById("colee2");
            var colee1 = document.getElementById("colee1");
            var colee = document.getElementById("colee");
            colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
            function Marquee1() {
                //当滚动至colee1与colee2交界时
                if (colee2.offsetTop - colee.scrollTop <= 0) {
                    colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
                } else {
                    colee.scrollTop++
                }
            }
            var MyMar1 = setInterval(Marquee1, speed)//设置定时器
            //鼠标移上时清除定时器达到滚动停止的目的
            colee.onmouseover = function () { clearInterval(MyMar1) }
            //鼠标移开时重设定时器
            colee.onmouseout = function () { MyMar1 = setInterval(Marquee1, speed) }
        </script>

　　图片向下滚动

<div id="colee_bottom" style="overflow: hidden; height: 253px; width: 410px;">
            <div id="colee_bottom1">
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                <p>
                    <img src="/jscss/demoimg/200907/bg3.jpg"></p>
            </div>
            <div id="colee_bottom2">
            </div>
        </div>
        <script>
            var speed = 30
            var colee_bottom2 = document.getElementById("colee_bottom2");
            var colee_bottom1 = document.getElementById("colee_bottom1");
            var colee_bottom = document.getElementById("colee_bottom");
            colee_bottom2.innerHTML = colee_bottom1.innerHTML
            colee_bottom.scrollTop = colee_bottom.scrollHeight
            function Marquee2() {
                if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0)
                    colee_bottom.scrollTop += colee_bottom2.offsetHeight
                else {
                    colee_bottom.scrollTop--
                }
            }
            var MyMar2 = setInterval(Marquee2, speed)
            colee_bottom.onmouseover = function () { clearInterval(MyMar2) }
            colee_bottom.onmouseout = function () { MyMar2 = setInterval(Marquee2, speed) }
        </script>

 

　　图片向左滚动

<div id="colee_left" style="overflow: hidden; width: 500px;">
            <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="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td id="colee_left2" valign="top">
                    </td>
                </tr>
            </table>
        </div>
        <script>
            //使用div时，请保证colee_left2与colee_left1是在同一行上.
            var speed = 30//速度数值越大速度越慢
            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>

　　图片向右滚动

<!--下面是向右滚动代码-->
        <div id="colee_right" style="overflow: hidden; width: 500px;">
            <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="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></p>
                                </td>
                                <td>
                                    <p>
                                        <img src="/jscss/demoimg/200907/bg3.jpg"></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>