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，可以放心食用(～￣▽￣)～
