js實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)播放
本文實(shí)例為大家分享了js實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)播放的具體代碼,供大家參考,具體內(nèi)容如下
1.實(shí)現(xiàn)效果圖
鼠標(biāo)移入,暫停滾動(dòng); 鼠標(biāo)移出,繼續(xù)滾動(dòng);
2.原理
- 要實(shí)現(xiàn)無(wú)縫銜接,在原有ul后面還要有一個(gè)一樣內(nèi)容的ul;
- 最外層div為可視區(qū)域,設(shè)overflow:hidden;
- 2個(gè)ul的高度 > 外層可視div高度,才能滾動(dòng);
3.實(shí)現(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(()=>{ ? ? ? ? // 當(dāng)滾動(dòng)高度大于列表內(nèi)容高度時(shí)恢復(fù)為0 ? ? ? ? if (ulbox.scrollTop >= ul1.scrollHeight) { ? ? ? ? ? ? ulbox.scrollTop = 0; ? ? ? ? } else { ? ? ? ? ? ? ulbox.scrollTop++; ? ? ? ? } ? ? }, t); }, rollStop(){ ? ? clearInterval(this.timer); },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)
這篇文章主要介紹了BootStrap初學(xué)者對(duì)彈出框和進(jìn)度條的使用感覺(jué)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-12-12asp.net+js 實(shí)現(xiàn)無(wú)刷新上傳解析csv文件的代碼
無(wú)刷新上傳解析csv文件的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-05-05js對(duì)象轉(zhuǎn)json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)案例
本篇文章主要是對(duì)js對(duì)象轉(zhuǎn)json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)案例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02微信小程序云開(kāi)發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫(xiě)權(quán)限
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫(xiě)權(quán)限,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05JS?中的類Public,Private?和?Protected詳解
這篇文章主要介紹了JS中的類Public,Private和Protected詳解,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
這篇文章主要介紹了JavaScript繼承基礎(chǔ)講解,原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承,需要的朋友可以參考下2014-08-08詳解JavaScript中Math內(nèi)置對(duì)象基本方法的使用
Math?是javaScript的內(nèi)置對(duì)象,包含了部分?jǐn)?shù)學(xué)常數(shù)屬性和數(shù)學(xué)函數(shù)方法。本文將詳細(xì)講解Math基本方法的使用,感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04js計(jì)時(shí)事件實(shí)現(xiàn)圓形時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js計(jì)時(shí)事件實(shí)現(xiàn)圓形時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10