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 {

     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 工程上。