<div id="review_box">
<ul id="conent1">
<li>第一条内容</li>
<li>第二条内容</li>
<li>第三条内容</li>
<li>第四条内容</li>
<li>第五条内容</li>
<li>第六条内容</li>
</ul>
<ul id="conent2"></ul>
</div>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 60px; /* 必须 */
overflow: hidden;/* 必须 */
margin: 50px auto;
border: 1px solid red;
text-align: center;
}
ul {
list-style: none;
}
function scrollFun(t) {
var con1 = document.getElementById("conent1");
var con2 = document.getElementById("conent2");
var conbox = document.getElementById("review_box");
con2.innerHTML = con1.innerHTML;
conbox.scrollTop = 0; // 开始无滚动时设为0
var timer = setInterval(scrollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
// 鼠标移进内容区域停止滚动
conbox.onmouseover = function () {
clearInterval(timer);
}
// 鼠标移出后继续滚动
conbox.onmouseout = function () {
timer = setInterval(scrollStart, t);
}
}
// 开始滚动函数
function scrollStart() {
var con1 = document.getElementById("conent1");
var con2 = document.getElementById("conent2");
var conbox = document.getElementById("review_box");
// 不断给scrollTop的值+1,内容开始滚动,当滚动高度大于列表内容高度时恢复为0
if (conbox.scrollTop >= con1.scrollHeight) {
conbox.scrollTop = 0;
} else {
conbox.scrollTop++;
}
}
scrollFun(100);