本文实例为大家分享了js实现公告自动滚动的具体代码，供大家参考，具体内容如下
html
<div class="test003">
<div class="test004">
<div class="testTop"><span class="span1">姓名</span>
<span class="span2">状态</span>
<span class="span3">查询积分分数</span>
</div>
<div id="box">
<ul id="list">
<li><span class="span1">173****3856</span>
<span class="span2">在11:36查询</span>
<span class="span3">108分</span>
<li>
<li><span class="span1">139****1926</span>
<span class="span2">在11:49查询</span>
<span class="span3">120分</span>
<li>
<li><span class="span1">137****2575</span>
<span class="span2">在09:59查询</span>
<span class="span3">110分</span>
<li>
<li><span class="span1">181****6973</span>
<span class="span2">在11:08查询</span>
<span class="span3">120分</span>
<li>
<li><span class="span1">133****1728</span>
<span class="span2">在13:10查询</span>
<span class="span3">119分</span>
<li>
<li><span class="span1">186****2048</span>
<span class="span2">在12:37查询</span>
<span class="span3">114分</span>
<li>
<li><span class="span1">153****0658</span>
<span class="span2">在10:22查询</span>
<span class="span3">120分</span>
<li>
<li><span class="span1">150****3880</span>
<span class="span2">在12:24查询</span>
<span class="span3">120分</span>
<li>
<li><span class="span1">189****5792</span>
<span class="span2">在11:00查询</span>
<span class="span3">105分</span>
<li>
<li><span class="span1">157****3676</span>
<span class="span2">在14:55查询</span>
<span class="span3">192分</span>
<li>
<li><span class="span1">150****3811</span>
<span class="span2">在14:25查询</span>
<span class="span3">108分</span>
<li>
<li><span class="span1">173****4713</span>
<span class="span2">在15:21查询</span>
<span class="span3">109分</span>
<li>
<li><span class="span1">159****7114</span>
<span class="span2">在14:40查询</span>
<span class="span3">106分</span>
<li>
<li><span class="span1">180****2836</span>
<span class="span2">在15:35查询</span>
<span class="span3">147分</span>
<li>
<li><span class="span1">187****3546</span>
<span class="span2">在14:17查询</span>
<span class="span3">120分</span>
<li>
</ul>
</div>
</div>
</div>css
<style type="text/css">
.test001 {
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
font-weight: bold;
font-size: 17px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.test002 {
margin-top: 15px;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 21px;
display: flex;
justify-content: center;
align-items: center;
}
.test003 {
margin-top: 15px;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.test004 {
width: 90%;
display: flex;
justify-content: center;
border: solid 1px;
flex-direction: column;
align-items: center;
}
.testTop {
width: 90%;
font-size: 14px;
height: 30px;
display: block;
font-weight: bold;
padding-left: 20px;
padding-top: 15px;
}
.testTop span {
margin-right: 75px;
}
.testTop .span2 {
margin-right: 65px;
}
#box {
width: 90%;
height: 250px;
line-height: 2em;
margin-top: 15px;
padding: 0 0px;
overflow: hidden;
}
#list li {
margin-top: 10px;
list-style: none;
}
#list span {
margin-right: 30px;
font-size: 14px;
display: inline-block;
overflow: hidden;
text-align: center;
}
#list .span1 {
width: 80px;
}
#list .span2 {
margin-right: 40px;
width: 80px;
}
#list .span3 {
width: 50px;
}
</style>js
<script>
var box = document.getElementById('box')
var list = document.getElementById('list')
console.log(box, 'box')
//复制一遍文档
var content = list.innerHTML;
list.innerHTML += content;
var time = 30;
var timer = setInterval(up, time);
function up() {
//滚上去的内容大于ul内容高度的一半，重置高度 0
if (box.scrollTop > (list.offsetHeight >> 1)) {
box.scrollTop = 0
} else {
box.scrollTop++;
}
}
//鼠标移入暂停--清除定时器
// box.onmouseover = function () {
// clearInterval(timer)
// }
///鼠标移出继续--启动定时器
box.onmouseout = function() {
timer = setInterval(up, time);
}
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
