技術標籤：jscsshtmlvuejavascript

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