js實現(xiàn)列表自動滾動循環(huán)播放
更新時間:2022年07月14日 11:40:25 作者:hst?
這篇文章主要為大家詳細介紹了js實現(xiàn)列表自動滾動循環(huán)播放,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)列表自動滾動循環(huán)播放的具體代碼,供大家參考,具體內容如下
1.實現(xiàn)效果圖
鼠標移入,暫停滾動; 鼠標移出,繼續(xù)滾動;
2.原理
- 要實現(xiàn)無縫銜接,在原有ul后面還要有一個一樣內容的ul;
- 最外層div為可視區(qū)域,設overflow:hidden;
- 2個ul的高度 > 外層可視div高度,才能滾動;
3.實現(xiàn)代碼
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); },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
利用JavaScript實現(xiàn)檢測用戶是否在線功能
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)檢測用戶是否在線功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2022-12-12asp.net+js 實現(xiàn)無刷新上傳解析csv文件的代碼
無刷新上傳解析csv文件的實現(xiàn)代碼,需要的朋友可以參考下。2010-05-05微信小程序云開發(fā)實現(xiàn)云數(shù)據庫讀寫權限
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)實現(xiàn)云數(shù)據庫讀寫權限,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05JS?中的類Public,Private?和?Protected詳解
這篇文章主要介紹了JS中的類Public,Private和Protected詳解,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08JavaScript繼承基礎講解(原型鏈、借用構造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
這篇文章主要介紹了JavaScript繼承基礎講解,原型鏈、借用構造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承,需要的朋友可以參考下2014-08-08