一、需求：
1.一個列表，一頁顯示四條，表格頭部固定，自動向上輪播，每次輪播四條即一頁。
2.鼠標(biāo)上移停止?jié)L動
3.鼠標(biāo)移走恢復(fù)滾動
二、原理：
1、css：
- 通過position和relative配合，通過改變滾動部分的top值來確定顯示當(dāng)前可見部分
- 盒子的高度寫死，為4條列表加起來的高度，overflow設(shè)為hidden讓溢出部分隱藏掉
- 滾動部分高度自適應(yīng)，等于所有列表高度（包括添加的虛擬列表）即可
注意：滾動部分的top值要直接寫行內(nèi)樣式，即style="top:0"這種方式去寫，因為js通過document.style.top只能獲取行內(nèi)樣式（另：js通過style.[屬性值]只能獲取行內(nèi)樣式）
2.js：
- 列表內(nèi)容直接由數(shù)組循環(huán)生成
- 在列表尾部添加一定數(shù)量的虛擬數(shù)據(jù):
a.若總數(shù)剛好能被4整除，添加4個虛擬數(shù)據(jù)即可
b.若總數(shù)不能被4整除但余數(shù)小于4，添加4個虛擬數(shù)據(jù)
c.若總數(shù)不能被4整除且余數(shù)大于4，添加8個虛擬數(shù)據(jù) - 使用css3樣式transition做動畫效果
- 核心重點：關(guān)鍵轉(zhuǎn)換點：判斷原數(shù)據(jù)（不包括偽造的數(shù)據(jù)）是否全部偏移容器，若偏移：
a.關(guān)掉動畫效果
b.重置top值
c.通過setTimeout把滾動函數(shù)插入隊列中，等待上面的復(fù)位執(zhí)行完之后執(zhí)行一次，去除中斷的時間 - 設(shè)置定時器setInterval做自動播放功能
-綁定mouseover事件和mouseout做鼠標(biāo)移上移出操作
三、不多逼逼，直接上代碼：
1、html：
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>無縫滾動</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="scrollHeader">這是滾動的header部分</div>
<div id="container">
<ul id="list" style="top: 0"></ul>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2、css:
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
#container{
width: 531px;
height: 164px;
position: relative;
margin: 0 auto;
overflow-y: hidden;
}
.scrollHeader{
width: 531px;
height: 40px;
border: 1px solid #ff6557;
margin: 0 auto;
line-height: 40px;
text-align: center;
background: #ff6557;
color: #fff;
box-sizing: border-box;
}
#list{
position: absolute;
width: 531px;
}
#list>li{
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
border-top: none;
text-align: center;
}
3、js
const data = []; // 原本的data數(shù)據(jù)
let newData = []; // 加上虛擬item的數(shù)據(jù)
let itemNum = 4; // 一頁顯示的條數(shù)
let num = data.length % itemNum; // 記錄data除以出現(xiàn)item數(shù)目的余數(shù)
for (let i = 1; i<= 17; i++){
data.push(`這是第${i}段li`);
}
let addData = num > itemNum/2 ? data.slice(0,num + itemNum) : data.slice(0,itemNum * 2);
console.log(addData);
newData = data.concat(addData);
window.onload = function () {
let list = document.getElementById("list");
let time = 5000; // 循環(huán)時間
//生成ul節(jié)點下的li
let generateList = function (listData) {
listData.length && listData.forEach((item) => {
let listItem = document.createElement("li");
listItem.innerHTML = `<span>${item}</span>`
list.appendChild(listItem);
});
}
// 滾動
let scroll = function () {
let top = parseInt(list.style.top);
if (parseInt(list.style.top) < -41 * (data.length)) { // 判斷原數(shù)據(jù)（不包括偽造的數(shù)據(jù)）是否全部偏移容器
// debugger;
list.style.transition = "";
list.style.top = parseInt(list.style.top) - (-41 * (data.length)) + "px";
setTimeout(scroll, 0); // 把top復(fù)位的時候立馬把scroll函數(shù)插入隊列中，等待上面的復(fù)位執(zhí)行完之后執(zhí)行一次，去除中斷的時間
// setTimeout(scroll, 100); // 如果出現(xiàn)過渡效果沒清除掉的情況，把時間設(shè)為100ms試試
}else{
list.style.transition = "all 2s";
list.style.top = top - 164 + "px";
}
}
generateList(newData);
// 設(shè)置定時器執(zhí)行滾動
let timer = setInterval(scroll, time);
// 鼠標(biāo)上移時不自動滾動
list.onmouseover = function () {
clearInterval(timer);
}
// 鼠標(biāo)離開后又恢復(fù)自動滾動
list.onmouseleave = function () {
timer = setInterval(scroll, time);
}
};
附上github地址：https://github.com/neymar2017/my-marquee
另：短時間寫的粗略代碼，有問題請指出，謝謝指教
