JQ跑马灯效果

HTMl代码：

<ul class="RealTimeAlarm">
              <li v-for="(item, index) in RealTimeAlarmData" :key="index">
                <div class="realLeft">
                  <div class="smallTitle">{{ item.title }}</div>
                  <div class="smallText">{{ item.text }}</div>
                </div>
                <div class="realCenter">{{ item.number }}</div>
                <div class="realRight">{{ item.time }}</div>
              </li>
            </ul>

JQ代码：

const ul = $('.RealTimeAlarm')[0]
      const li = $('.RealTimeAlarm>li')[0]
      const speed = 30
      function Marquee() {
        if (li.offsetTop - ul.scrollTop <= 0) {
          ul.scrollTop -= li.offsetHeight
        } else {
          ul.scrollTop++
        }
      }
      // 设置定时器
      var MyMar = setInterval(Marquee, speed)
      // 鼠标经过时清除定时器达到滚动停止的目的
      ul.onmouseover = function() {
        clearInterval(MyMar)
      }
      // 鼠标移开时重设
      ul.onmouseout = function() {
        MyMar = setInterval(Marquee, speed)
      }