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

3403771864 發布于2022-09-12 19:55 / 1396人閱讀

　　列表自動滾動循環播放不要太爽，下面看看具體代碼：

　　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);
　　},

云服務器 GPU云服務器 js循環滾動循環滾動css js js不間斷循環滾動 js 語音循環播放

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/127671.html

Vue 實現網易云音樂 WebApp

摘要：基于等開發一款移動端音樂，界面參考了安卓版的網易云音樂布局適配常見移動端。圖標使用阿里巴巴圖標庫，中間的唱片旋轉動畫使用了實現。搜索功能實現功能搜索歌手歌單歌曲熱門搜索數據節流上拉刷新保存搜索記錄。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp，UI ...

Karuru 2019-08-22 17:16 評論0 收藏0
Vue 實現的音樂項目 music app 知識點總結分享

摘要：后兩個屬性可選。屬性定義了項目的縮小比例，默認為，即如果空間不足，該項目將縮小。屬性定義了在分配多余空間之前，項目占據的主軸空間。它的默認值為，即項目的本來大小。結合的異步組件和的代碼分割功能，輕松實現路由組件的懶加載。項目總結這是我第二個用 Vue 實現的項目，下面內容包括了在實現過程中所記錄的知識點以及一些小技巧項目演示地址：https://music-vue.n-y.io源...

meteor199 2019-08-26 11:45 評論0 收藏0
HTML5移動端音樂播放器（啟蒙篇）

摘要：前些天偷臺風的閑暇時寫了一個移動端音樂播放器，作為練手項目。有的歌詞周杰倫算什么男人格式是時間點時間歌詞創建映射首先以將歌詞字符串分割成以時間點文字的數組，但由于這樣分割之后最后一個元素是空的，所以用刪除最后一個元素。這段時間公司一直在做一個PC的教育類單頁應用，龐大復雜，涉及非常多H5的知識，音頻就是其中的一部分。前些天偷臺風的閑暇時寫了一個移動端音樂播放器，作為練手項目。在線地...

Lin_R 2019-08-20 11:58 評論0 收藏0