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