js实现公告自动滚动

本文实例为大家分享了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%;
                /* text-align: center; */
                /* font-weight: bold; */
                /* font-size: 21px; */
                display: flex;
                justify-content: center;
                /* border: solid 1px; */
                flex-direction: column;
                align-items: center;
            }

            .test004 {
                /* margin-top: 15px; */
                width: 90%;
                /* text-align: center; */
                /* font-weight: bold; */
                /* font-size: 21px; */
                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;
                /* background-color: skyblue; */
                margin-top: 15px;
                /* margin: 100px auto; */
                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;

                /* margin-right: 50px; */
                /* text-align: left; */
                /* border: 1px solid black; */
            }

            /* #list a:hover {
            color: orangered;
            text-decoration: underline;
        } */
</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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。