实现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按键停止运动,如果在点击后将鼠标先移入图片再移出会重新开启
}
}
以上是智能社课程学习内容