JavaScript实现无缝滚动

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #div_img {
            height: 300px;
            width: 900px;
            background: red;
            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }

            #div_img ul {
                position: absolute;
                left: 0px;
                top: 0px;
            }

                #div_img ul li {
                    float: left;
                    width: 300px;
                    height: 300px;
                    list-style: none;
                }
    </style>

<script type="text/javascript">
        window.onload = function () {
            var odiv = document.getElementById('div_img');
            var oul = odiv.getElementsByTagName('ul')[0];
            var oli = oul.getElementsByTagName('li');
            oul.innerHTML += oul.innerHTML;
            oul.style.width = oli[0].offsetWidth * oli.length + "px";
            var timer = null;
            function move() {
                if (oul.offsetLeft < -oul.offsetWidth / 2) {
                    oul.style.left = 0;
                }
                if (oul.offsetLeft > 0) {
                    oul.style.left = -oul.offsetWidth / 2 + "px";
                }
                oul.style.left = oul.offsetLeft + 2 + "px";
            };

            timer = setInterval(move, 30);

            odiv.onmouseover = function () {
                clearInterval(timer);
            };

            odiv.onmouseout = function () {
                timer = setInterval(move, 30);
            };


        };
    </script>

    <div id="div_img">
        <ul>
            <li><img src="imgs/1.jpg" /></li>
            <li><img src="imgs/3.jpg" /></li>
            <li><img src="imgs/4.jpg" /></li>
        </ul>
    </div>

    用JavaScript实现无缝滚动，当鼠标移上去时，图片停止滚动，当鼠标移开时，图片继续开始滚动。

    下面有如下这张示意图来讲解无缝滚动的核心思想：

 

 

其核心思想如下：如果使用三张图片进行滚动，那么不好操作，一遍还没滚完，图片的的背景就会露出来，可以使其变成重复的两份，用oul.innerHTML += oul.innerHTML;实现，其效果图如上图的示意图1.    这时候让图片开始向左滚动，当前面的三张图片滚动完后，其效果图如示意图2，这样和用户第一次看到的情况完全相同，注意是完全相同，这样我们就可以使用一个障眼法，就是：每当图片滚动到这样的时候，我们把整个图片往右拉三张的距离，如示意图3，其就又变成了最开始的样子，继续滚动。这样就实现了无缝滚动的效果。