js實現(xiàn)列表自動滾動循環(huán)播放
更新時間：2022年07月14日 11:40:25 作者：hst?
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)列表自動滾動循環(huán)播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)列表自動滾動循環(huán)播放的具體代碼，供大家參考，具體內(nèi)容如下
1.實現(xiàn)效果圖
鼠標(biāo)移入，暫停滾動； 鼠標(biāo)移出，繼續(xù)滾動；
2.原理
- 要實現(xiàn)無縫銜接，在原有ul后面還要有一個一樣內(nèi)容的ul；
- 最外層div為可視區(qū)域，設(shè)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(()=>{
? ? ? ? // 當(dāng)滾動高度大于列表內(nèi)容高度時恢復(fù)為0
? ? ? ? if (ulbox.scrollTop >= ul1.scrollHeight) {
? ? ? ? ? ? ulbox.scrollTop = 0;
? ? ? ? } else {
? ? ? ? ? ? ulbox.scrollTop++;
? ? ? ? }
? ? }, t);
},
rollStop(){
? ? clearInterval(this.timer);
},以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入淺析javascript立即執(zhí)行函數(shù)
在Javascript中，任何function在執(zhí)行的時候都會創(chuàng)建一個執(zhí)行上下文，因為為function聲明的變量和function有可能只在該function內(nèi)部，這個上下文，在調(diào)用function的時候，提供了一種簡單的方式來創(chuàng)建自由變量或私有子function。2015-10-10
JS動態(tài)增加刪除UL節(jié)點LI及相關(guān)內(nèi)容示例
這篇文章主要介紹了JS如何動態(tài)增加刪除UL節(jié)點LI及相關(guān)內(nèi)容,需要的朋友可以參考下2014-05-05
JavaScript獲取路徑的方法有很多，網(wǎng)上也可以搜索的到，下面本例也要為大家講解下，有源碼及結(jié)果截圖2014-05-05
這篇文章主要是對JS與C#編碼解碼進行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JS中confirm,alert,prompt函數(shù)使用區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別分析，需要的朋友可以參考下。2010-04-04
本篇文章主要介紹了js循環(huán)改變div顏色具體方法，需要的朋友可以參考一下2013-06-06
下面小編就為大家?guī)硪黄猣orm表單轉(zhuǎn)Json提交的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)點擊數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
使用layui+ajax實現(xiàn)簡單的菜單權(quán)限管理及排序的方法
今天小編就為大家分享一篇使用layui+ajax實現(xiàn)簡單的菜單權(quán)限管理及排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
getElementByIdx_x js自定義getElementById函數(shù)
最近看JS代碼，發(fā)現(xiàn)不少人問getElementByIdx_x是什么函數(shù)，其實就是個getElementById自定義函數(shù)2012-01-01