js如何實現列表自動滾動循環播放

這篇文章主要介紹了js如何實現列表自動滾動循環播放的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇js如何實現列表自動滾動循環播放文章都會有所收獲，下面我們一起來看看吧。

1.實現效果圖

鼠標移入，暫停滾動； 鼠標移出，繼續滾動

2.原理

• 要實現無縫銜接，在原有ul后面還要有一個一樣內容的ul；

• 最外層div為可視區域，設overflow：hidden；

• 2個ul的高度 > 外層可視div高度，才能滾動；

3.實現代碼

html：

<!-- vue -->
<div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)">
    <ul id="comment1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="comment2"></ul>
</div>

css:

div {
    height: 100px; /* 必須 */
    overflow: hidden;/* 必須 */
}

js:

//vue data
data (){
    return {
        timer: null,
    }
},
mounted() {
      this.roll(60);
},
beforeDestroy() {
      if (this.timer) clearInterval(this.timer);
},
//vue methods
roll(t) {
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.scrollTop = 0;
    this.rollStart(t);
},
rollStart(t) {
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    this.rollStop();
    this.timer = setInterval(()=>{
        // 當滾動高度大于列表內容高度時恢復為0
        if (ulbox.scrollTop >= ul1.scrollHeight) {
            ulbox.scrollTop = 0;
        } else {
            ulbox.scrollTop++;
        }
    }, t);
},
rollStop(){
    clearInterval(this.timer);
},

關于“js如何實現列表自動滾動循環播放”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“js如何實現列表自動滾動循環播放”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。