向上轮播图，新闻 ，公告轮播，记录一下，以后方便用
<html>
<head>
<title>vue</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
* {
list-style: none;
padding: 0px;
margin: 0px;
}
#hot-box {
height: 30px;
border: 1px solid #ccc;
overflow: hidden;
width: 200px;
margin: 50px auto;
}
#hot-box li {
line-height: 30px;
padding: 0 10px;
height: 30px;
}
</style>
</head>
<body>
<div id="hot-box">
<ul id="hot-content01">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>0000</li>
</ul>
<ul id="hot-content02"></ul>
</div>
</body>
<script>
var timer, timeout;
// 滚动速度 越小越快
var speed = 40;
var hotBox = document.querySelector('#hot-box');
var hotContent01 = document.querySelector('#hot-content01');
var hotContent02 = document.querySelector('#hot-content02');
// 将hotContent01内容复制到hotContent02
hotContent02.innerHTML = hotContent01.innerHTML;
function runUp() {
clearTimeout(timeout)
// hotContent01已经向上滚出了hotBox范围
if (hotContent02.offsetTop - hotBox.scrollTop <= 0) {
// 设置hotBox恢复到刚开始的位置
hotBox.scrollTop = hotBox.scrollTop - hotContent01.offsetHeight;
} else {
hotBox.scrollTop++;
// 什么时候停下
if (hotBox.scrollTop % 30 == 0) {
clearTimeout(timeout);
clearInterval(timer);
timeout = setTimeout(function () {
hotBox.scrollTop++;
return timer = setInterval(runUp, speed);
}, 1000);
}
}
}
timer = setInterval(runUp, speed);
</script>
</html>
来源：CSDN
作者：weixin_41765288
链接：https://blog.csdn.net/weixin_41765288/article/details/103237610