一、需求：
1.一个列表，一页显示四条，表格头部固定，自动向上轮播，每次轮播四条即一页。
2.鼠标上移停止滚动
3.鼠标移走恢复滚动
二、原理：
1、css：
- 通过position和relative配合，通过改变滚动部分的top值来确定显示当前可见部分
- 盒子的高度写死，为4条列表加起来的高度，overflow设为hidden让溢出部分隐藏掉
- 滚动部分高度自适应，等于所有列表高度（包括添加的虚拟列表）即可
注意：滚动部分的top值要直接写行内样式，即style="top:0"这种方式去写，因为js通过document.style.top只能获取行内样式（另：js通过style.[属性值]只能获取行内样式）
2.js：
- 列表内容直接由数组循环生成
- 在列表尾部添加一定数量的虚拟数据:
a.若总数刚好能被4整除，添加4个虚拟数据即可
b.若总数不能被4整除但余数小于4，添加4个虚拟数据
c.若总数不能被4整除且余数大于4，添加8个虚拟数据 - 使用css3样式transition做动画效果
- 核心重点：关键转换点：判断原数据（不包括伪造的数据）是否全部偏移容器，若偏移：
a.关掉动画效果
b.重置top值
c.通过setTimeout把滚动函数插入队列中，等待上面的复位执行完之后执行一次，去除中断的时间 - 设置定时器setInterval做自动播放功能
-绑定mouseover事件和mouseout做鼠标移上移出操作
三、不多逼逼，直接上代码：
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数据
let newData = []; // 加上虚拟item的数据
let itemNum = 4; // 一页显示的条数
let num = data.length % itemNum; // 记录data除以出现item数目的余数
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; // 循环时间
//生成ul节点下的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)) { // 判断原数据（不包括伪造的数据）是否全部偏移容器
// debugger;
list.style.transition = "";
list.style.top = parseInt(list.style.top) - (-41 * (data.length)) + "px";
setTimeout(scroll, 0); // 把top复位的时候立马把scroll函数插入队列中，等待上面的复位执行完之后执行一次，去除中断的时间
// setTimeout(scroll, 100); // 如果出现过渡效果没清除掉的情况，把时间设为100ms试试
}else{
list.style.transition = "all 2s";
list.style.top = top - 164 + "px";
}
}
generateList(newData);
// 设置定时器执行滚动
let timer = setInterval(scroll, time);
// 鼠标上移时不自动滚动
list.onmouseover = function () {
clearInterval(timer);
}
// 鼠标离开后又恢复自动滚动
list.onmouseleave = function () {
timer = setInterval(scroll, time);
}
};
附上github地址：https://github.com/neymar2017/my-marquee
另：短时间写的粗略代码，有问题请指出，谢谢指教
网友评论