无缝滚动

实现无缝滚动

  介绍一下怎样实现无缝滚动展示效果。

  可以点击这里看看效果。

  目录：

实现无缝滚动
页面结构

滚动函数

分析

页面结构

// html
<div id="box">
<ul>
<li><img src="img/Itachi.jpg" /></li>
<li><img src="img/luffy.jpg" /></li>
<li><img src="img/naruto.jpg" /></li>
<li><img src="img/onePiece.jpg" /></li>
</ul>
</div>

// css
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
margin: 100px auto;
width: 480px;
height: 110px;
border: 1px black solid;
overflow: hidden;
}
#box ul {
position: absolute;
left: 0;
top: 5px;
}
#box ul li {
float: left;
width: 100px;
height: 100px;
padding-left: 16px;
list-style: none;
}
#box ul li img {
width: 100px;
height: 100px;
}

  我们先给给 ul 设置绝对定位(absolute)使其脱离文档流，然后将其 left 设置为0，接着把一张张要展示的照片放在一个个的 li 里面。

滚动函数

window.onload = function() {
var oDiv = document.getElementById('box');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var speed = 2;  // 滚动的速度，正数为向右移动，负数向左移动
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = oLi.length * oLi[0].offsetWidth + 'px';
function fnMove() {
if(oUl.offsetLeft > 0) {
// 右移
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
}else if(oUl.offsetLeft < -oUl.offsetWidth / 2) { // 注意 ul 的 left 是负数 　　　
// 左移
oUl.style.left = 0;
}
oUl.style.left = oUl.offsetLeft + speed + 'px'; // 整个ul向右(左)移动
}
var timer = null;
clearInterval(timer);
timer = setInterval(fnMove, 30);
// 鼠标移动到图片上面的时候清除定时器，这样滚动就停止了
oUl.onmouseover = function() {
clearInterval(timer);
}
// 当鼠标移开的时候执行重新设定定时器
oUl.onmouseout = function() {
timer = setInterval(fnMove, 30);
}
}

  我们首先设定一个定时器(setInterval)，让滚动函数每隔30秒执行一次，当鼠标放在图片上面时我们通过清除定时器使滚动暂停，当鼠标离开的时候我们又继续设定定时器执行滚动函数。

分析

  当 ul 的 left 不断增加（

oUl.offsetLeft + speed

）时，ul 很快便会跑到最右边消失不见，所以我们使滚动的内容增加一倍：

oUl.innerHTML += oUl.innerHTML；
// ul 宽度增加,根据在实际使用的照片大小修改增加的值
oUl.style.width = oLi.length * oLi[0].offsetWidth + 'px';

  一开始的时候 ul 的位置是在这里：

    


  此时 ul 的 offsetLeft(即 ul 相对于父元素 div.box 左侧的距离 )为0， 然后 ul 继续向右移动(offsetLeft + speed)，在滚动函数中判断语句

oUl.offsetLeft > 0

成立，于是把 ul 的 left 值设为负的 ul 总宽度的一半：

oUl.style.left = -oUl.offsetWidth / 2 + 'px';

  这时候 ul 的位置被整体向左移动一半自身宽度的距离：

  


  接下来，ul 继续向右移动直到其 offsetLeft 再次大于0。

  就这样一个简单的无缝滚动就这样实现了！

需要注意的是，当 speed 设为负值的时候滚动是向左的，此时的 offsetLeft 由于向左移动一直都是负值，将其整体向右平移的条件是其左边一半已经移出了父元素 div.box 的左侧(

oUl.offsetLeft < -oUl.offsetWidth / 2

) ，然后再将其 left 赋值为 0 即可。