1 概述
无缝滚动效果在网页里特别常见，一般它用来显示一定数量的图片或者与轮播图进行结合，在说无缝滚动实例之前，我们得说说偏移量中的offsetLeft、offsetWidth 、offsetTop和offsetHeight。
- 偏移量共包括offsetTop、offsetLeft、offsetWidth、offsetHeight
元素：内容大小（width、height）、内边距（padding）、边框（border）、外边距（margin）、滚动条（scroll）
【1】offsetWidth：元素在水平方向上占据的大小，无单位
offsetWidth = border + 元素内容宽度 + padding
= border-left-width + padding-left- width + width + padding-right-width + border-right-width
【2】offsetHeight：元素在垂直方向上占据的大小，无单位
offsetHeight = border + 元素内容高度 + padding
= border-left-height+ padding-left- height+ height+ padding-height-width + border-right-height
注：1. 如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；
2. 如果存在水平滚动条，offsetHeight也包括水平滚动条的高度
【3】offsetTop： 表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
【4】offsetLeft：表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
理解了偏移量，我们就可以开始动手写无缝滚动功能页面。
2 原理
2.1 HTML和CSS布局方面
重点注意的地方:
- 1 一定要给运动物体的父元素设置相对定位
#div1 {
/* 运动的父元素设置相对定位 */
position: relative;
overflow: hidden;
width: 712px;
height: 108px;
background-color: blue;
margin: 20px auto;
}
- 2 运动的本体要设置绝对定位
#div1 ul {
/* 运动的物体设置绝对定位 */
position: absolute;
top: 0;
left: 0;
}
2.2 JS部分
要先从布局上理解无缝滚动的原理，在运动的ul元素内本身就有8个li
，但是只显示4个，每次运动时就显示往后的li，但同时随着ui的运动对应的li也会被隐藏，在运动到一个特定位置时（总ul宽度的一半），将li的位置拉回初始位置，使其产生一个可以不断运动的“假象”、这就是无缝滚动的大致原理（我自己理解的），废话少说，上代码吧。
首先，用innerHTML输出一个新的ul，然后计算出ul实际的宽度。
oUl.innerHTML += oUl.innerHTML; //创建2个ul 也就是8个li
oUl.style.width = (aLi[0].offsetWidth) * aLi.length + 'px'; //计算出ul实际宽度
然后，就是重点部分，定义无缝滚动的功能函数，这个自己看代码理解(╥╯^╰╥)
//运动函数(重点)
var speed = -2; //运动方向默认向左
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);
接着是移入时暂停方便阅览和移出时继续运动的小功能实现
//移入就暂停
oDiv.onmouseover = function() {
clearInterval(timer);
};
//移出就运动
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
3 完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>无缝滚动练习</title>
<style>
* {
margin: 0;
padding: 0;
}
#index-select {
width: 400px;
height: 50px;
margin: 10px auto;
}
#index-select select {
float: left;
display: block;
margin: 0px 50px;
}
#div1 {
/* 运动的父元素设置相对定位 */
position: relative;
overflow: hidden;
width: 712px;
height: 108px;
background-color: blue;
margin: 20px auto;
}
#div1 ul {
/* 运动的物体设置绝对定位 */
position: absolute;
top: 0;
left: 0;
}
#div1 ul li {
float: left;
widows: 178px;
height: 108px;
list-style: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oDiv.getElementsByTagName('li');
var se1 = document.getElementById('se1');
var se2 = document.getElementById('se2');
oUl.innerHTML += oUl.innerHTML; //创建2个ul 也就是8个li
oUl.style.width = (aLi[0].offsetWidth) * aLi.length + 'px'; //计算出ul实际宽度
//运动函数(重点)
var speed = -2; //运动方向默认向左
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);
//移入就暂停
oDiv.onmouseover = function() {
clearInterval(timer);
};
//移出就运动
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
//控制方向和速度
se2.onchange = se1.onchange = function() {
if(se1['value'] == "向左") {
switch(se2['value']) {
case "慢速":
speed = -2;
break;
case "中速":
speed = -4;
break;
case "快速":
speed = -8;
break;
default:
console.log("弹吉他的左手是和弦");
}
}
if(se1['value'] == "向右") {
switch(se2['value']) {
case "慢速":
speed = 2;
break;
case "中速":
speed = 4;
break;
case "快速":
speed = 8;
break;
default:
console.log("弹吉他的右手是节奏");
}
}
};
};
</script>
</head>
<body>
<div id="index-select">
<select id="se1">
<option value="向左">向左</option>
<option value="向右">向右</option>
</select>
<select id="se2">
<option value="慢速">慢速</option>
<option value="中速">中速</option>
<option value="快速">快速</option>
</select>
</div>
<div id="div1">
<ul>
<li><img src="img/p1.jpg" </li>
<li><img src="img/p2.jpg" </li>
<li><img src="img/p3.jpg" </li>
<li><img src="img/p4.jpg" </li>
</ul>
</div>
</body>
</html>
OK，无缝滚动就是这样，经检验没有bug，可以放心食用(～￣▽￣)～
