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