跑马灯js实现效果

公司网站app要完成一个跑马灯的效果如下

下面是实现代码

//html
      <div id="card-top">
          <p><span>用户富士*下刚领取了一瓶亚麻籽油</span></p>
          <p><span>用户富士*下刚领取了一瓶亚麻籽油</span></p>   
          <p><span>用户富士*下刚领取了一瓶亚麻籽油</span></p>   
          <p><span>用户富士*下刚领取了一瓶亚麻籽油</span></p>   
          <p><span>用户富士*下刚领取了一瓶亚麻籽油</span></p>   
          <p><span>用户富士*下刚领取了一瓶亚麻籽油</span></p>   
          <div id="card-bottom"></div>    
      </div>

//js
      let speed = 30;         // 设置轮循的速度
      let cardBottom = document.getElementById('card-bottom');
      let cardTop = document.getElementById('card-top');
      let cardList = document.getElementById('card-list'); 
      cardBottom.innerHTML = cardTop.innerHTML;
      console.log(cardTop);
      function marquee(){
        if(cardList.scrollTop>=cardTop.offsetHeight){
          cardList.scrollTop=0;
        }
        else
        {
          cardList.scrollTop++;
        }
      }
      var myMar = setInterval(marquee, speed);