css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片

先上效果图

首先呈上效果图，主要是针对图片跑马灯效果（请忽略我的快速播放和录屏图标）

具体实现方式

目前我需要展示6张图片，但是为了实现无缝衔接，我的列表放了12张（放2遍图片），这样就不至于在切换时出现那么几毫秒的跳动。

<div id="swiper-roll">
      <div class="roll-wrapper">
          <ul>
              <li><img src="./static/img/firm1.png"></li>
              <li><img src="./static/img/firm2.png"></li>
              <li><img src="./static/img/firm3.png"></li>
              <li><img src="./static/img/firm4.png"></li>
              <li><img src="./static/img/firm5.png"></li>
              <li><img src="./static/img/firm1.png"></li>
              <li><img src="./static/img/firm2.png"></li>
              <li><img src="./static/img/firm3.png"></li>
              <li><img src="./static/img/firm4.png"></li>
              <li><img src="./static/img/firm5.png"></li>
          </ul>
      </div>
  </div>

//js部分
/**
               * 无缝滚动，可通过以下两种方式调节滚动速度：
               * 1、可通过设置iSpeed 大小调节单次滚动速度；
               * 2、可通过调节timer 定时器中最后一个参数（60）的大小来控制滚动的频率，同时达到调节速度的作用；
               */
window.onload = function(){
       let oDiv=document.getElementById('swiper-roll');
       let oUl=oDiv.getElementsByTagName('ul')[0];
       let aLi=oUl.getElementsByTagName("li");
       let iSpeed=-4;
       let timer=null;
       oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
       timer=setInterval(function(){
           oUl.style.left=oUl.offsetLeft+iSpeed+'px';
           if(oUl.offsetLeft <= -oUl.offsetWidth/2){
               oUl.style.left='0px';
           }
       },60);

       oUl.onmouseover=function(){
           clearInterval(timer);
       }
       oUl.onmouseout=function(){
           timer=setInterval(function(){
               oUl.style.left=oUl.offsetLeft+iSpeed+'px';
               if(oUl.offsetLeft <= -oUl.offsetWidth/2){
                   oUl.style.left='0px';
               }
           },60);
       }
   };

//css
#swiper-roll .roll-wrapper{
  width:100%;
  overflow: hidden;
  height: 130px;
  margin: 0 auto;
  position: relative;
}
.roll-wrapper li{
  float: left;
  list-style: none;
  width: 150px;
  height: 130px;
}
.roll-wrapper ul{
  position: absolute;
  top: 0;
  left: 0;
}

注意：1、具体图片，各位宝宝请自行找图片哟。