html实现段落左右无缝滚动,原生javascript实现无缝滚动

实现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;

}

要实现图片窗口整体的无缝滚动(我们需要通过定时器定时改变

• 的位置，于是我们有下面的片段来实现：

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按键停止运动，如果在点击后将鼠标先移入图片再移出会重新开启

}

}

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