题目要求:
要求实现以下页面,其中列表项是滚动循环播放的,而且每次只显示3个,当鼠标经过的时候停止播放,鼠标离开继续播放
const NOTICE_LIST = [
'恭喜罗X获得特等奖 别墅一套',
'恭喜张4获得一等奖 跑车一辆',
'恭喜张5获得二等奖 华为手机一部',
'恭喜张6获得二等奖 华为手机一部',
'恭喜张7获得三等奖 小米手机一部',
'恭喜张8获得三等奖 小米手机一部',
'恭喜张9获得三等奖 小米手机一部',
]
html代码
<!-- 外部盒子 -->
<div class="container">
<!-- 标题盒子 -->
<div class="title">
<div class="tborder"></div>
<h3>最近通知</h3>
</div>
<!-- 通知盒子 -->
<div class="notice">
<ul id="con1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="con2"></ul>
</div>
</div>
CSS代码
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 300px;
}
.title {
border-bottom: 1px solid #ccc;
height: 50px;
line-height: 50px;
}
.title .tborder {
width: 10px;
height: 40px;
margin-right: 20px;
margin-top: 5px;
background-color: orange;
float: left;
}
h3 {
float: left;
}
li {
list-style: none;
}
/* 这里盒子的高度是只需要容纳3个长度即可 */
.notice {
margin: 20px;
height: 120px;
overflow: hidden;
}
ul li {
padding: 10px;
}
#con1 {
overflow: hidden;
}
</style>
Script代码
<script>
const NOTICE_LIST = [
'恭喜罗X获得特等奖 别墅一套',
'恭喜张4获得一等奖 跑车一辆',
'恭喜张5获得二等奖 华为手机一部',
'恭喜张6获得二等奖 华为手机一部',
'恭喜张7获得三等奖 小米手机一部',
'恭喜张8获得三等奖 小米手机一部',
'恭喜张9获得三等奖 小米手机一部',
]
//获取数据源
var notice = document.querySelector('.notice')
var ul = notice.querySelector('ul')
var lis = ul.querySelectorAll('li')
//循环遍历
for (var i = 0; i < lis.length; i++) {
lis[i].innerHTML = NOTICE_LIST[i]
}
var box = document.querySelector('.notice')
var con1 = document.getElementById("con1")
var con2 = document.getElementById("con2")
con2.innerHTML = con1.innerHTML
//先进行滚动视图
function ScrollUp() {
// 当第一个完全被卷上去之后 将他的被卷上去的高度重新置0 重头开始
if (box.scrollTop >= con1.scrollHeight) {
box.scrollTop = 0;
} else
box.scrollTop++;
// console.log(box.scrollTop);
}
var i = setInterval("ScrollUp()", 50);
// 鼠标经过 停止播放
con1.onmouseover = function () {
clearInterval(i)
}
// 鼠标离开 继续播放
con1.onmouseout = function () {
i = setInterval("ScrollUp()", 50);
}
</script>
总结
实现的思路大体如下
(1)首先需要在列表外套一个盒子,盒子的高度是只需要那几行的高度(可以在chorm中调试),然后使用overflow为hidden将剩余的隐藏起来
(2)接着创建一个在原有的ul下面创建一个新的ul 内容为空
(3)编写script代码
- 使用定时器
- 获取数据源
- 将旧的ul的内容完全复制给新的ul
- 使用 box.scrollTop 进行移动,当移动到大于第一个ul的scrollHeight的,即说明第一个已经完全滚动上去了,这个时候需要将 box.scrollTop 置0
- 给鼠标经过和离开注册事件