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