js实现图片无缝循环跑马灯

html 代码

<div class="myls-out-div" style="overflow: hidden;">
    <ul id="mylspaomadeng"  class="myls-ul"  >
        <li  class="myls-li">
            <img  class="myls-img" src="img/indexImg/myls1.png" />
        </li>
        <li  class="myls-li">
            <img  class="myls-img" src="img/indexImg/myls2.png" />
        </li>
        <li  class="myls-li">
            <img  class="myls-img" src="img/indexImg/myls3.png" />
        </li>
        <li  class="myls-li">
            <img  class="myls-img" src="img/indexImg/myls4.png"  />
        </li>
    </ul>
 </div>

css

.myls-out-div {
    width: 100%;
    height: 212px;
    background-color: #fafafa;
    float: left;
    overflow: hidden;
 }
 .myls-img {
    height: 100%;
}
.myls-ul{
    float: left;
    height: 100%;
    position: relative;
    margin: 0px;
    padding: 0px;
}
 .myls-li{
    list-style: none;
    display: inline-block;
    float: left;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 100%;
}

js代码

function mylsRunHorseLight() {
      if (mylsTimer != null) {
            clearInterval(mylsTimer);
      }
      var oUl = document.getElementById("mylspaomadeng");
      if(oUl != null){
            oUl.innerHTML += oUl.innerHTML;
            oUl.innerHTML += oUl.innerHTML;
            oUl.innerHTML += oUl.innerHTML;
            var lis = oUl.getElementsByTagName('li');
            var lisTotalWidth = 0;
            var resetWidth = 0;
            for (var i = 0; i < lis.length; i++) {
                  lisTotalWidth += lis[i].offsetWidth;
            }
            for (var i = 1; i <= lis.length / 4; i++) {
                  resetWidth += lis[i].offsetWidth;
            }
            oUl.style.width = lisTotalWidth + 'px';
            var left = 0;
            mylsTimer = setInterval(function() {
                  left -= 1;
                  if (left <= -resetWidth) {
                        left = 0;
                  }
                  oUl.style.left = left + 'px';
            }, 20)
            $("#mylspaomadeng").hover(function() {
                  clearInterval(mylsTimer);
            }, function() {
                  clearInterval(mylsTimer);
                  mylsTimer = setInterval(function() {
                        left -= 1;
                        if (left <= -resetWidth) {
                              left = 0;
                        }
                        oUl.style.left = left + 'px';
                  }, 20);
            })
      }
}

注意事项

正常来说，宽度是自动获取进行计算的。在普通的工程下都没有问题，在 Spring Boot 项目中，我发现此处失效，查看原因是因为图片加载过慢，没有找到特别好的解决办法，直接将宽度限制死了。宽度的两种方法大家根据自身需要选择。目前失效的问题只出现在了 Spring Boot 工程上。