实现javascript的无缝滚动需要掌握基本的定位和运动知识

逐步分析图片的无缝滚动是怎么实现的HTML的基本结构如下

CSS样式：

#moving {  width: 600px;  height: 370px;  background-color: #ccc;  position: relative;  margin: 30px auto 0;  overflow: hidden;}#moving ul {  position: absolute;  left: 0;  top: 0;}#moving ul li {  list-style: none;  float: left;}#control {  width:300px;  margin: 20px auto;}#control input {  margin-left: 30px;  width: 50px;}

要实现图片窗口整体的无缝滚动（我们需要通过定时器定时改变<ul>的位置，于是我们有下面的片段来实现：

oUl.style.left = oUl.offsetLeft + speed + 'px';

speed对应定时器时间段内移动的距离，oUl指ul

    开始这样做能实现基本的运动，但是图片总是数量有限的，当最后一张图片滚动展示完毕后，后面就没有了内容。那么我们如何克服这个困难，让滚动一直持续循环下去呢？    为了达到这种效果，我们可以克隆同样的ul结构，并且拼接在一起，比如：

oUl.innerHTML += oUl.innerHTML;

注意不要漏了在ul加入overflow:hidden，否则可能会两栏显示

但是这样做还是不够的，图片总会播放完，但是我们不可能复制成千上万分一样的ul结构这时候需要一点小技巧当左段ul（为了阐述方便，分为两段，左段为原始，右段为复制的那份）滚动完成，右段的开头即将离开图片窗口的时候，将整个ul拉回到原始位置。如果是向右运动，那么当左端的开头第一张图片到左边尽头时，整个ul拉回到起始位置

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 + speed + 'px';        }

以下是javascript部分

window.onload = function(){        var oMove = document.getElementById('moving');        var oUl = oMove.getElementsByTagName('ul')[0];        var aLi = oUl.getElementsByTagName('li');        var oCtr = document.getElementById('control');        var oLeft = document.getElementById('left');        var oRight = document.getElementById('right');        var speed = null;        oUl.innerHTML += oUl.innerHTML;  //两段一样的内容        oUl.style.width = aLi[0].offsetWidth*aLi.length + "px";  //两段ul宽度不够，第二段会掉下去        oLeft.onclick = function(){            return speed = -3;        }        oRight.onclick = function(){            return speed = 3;        }        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 + speed + 'px';        }        var timer = setInterval(move,30);        oMove.onmouseover = function(){            clearInterval(timer);        };        oMove.onmouseout = function(){            timer = setInterval(move,30);        };        var btn = document.getElementById("stop");        btn.onclick = function(){            clearInterval(timer);   //stop按键停止运动，如果在点击后将鼠标先移入图片再移出会重新开启        }    }

以上是智能社课程学习内容