本篇文章小编给大家分享一下js实现列表自动滚动循环播放代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
1.实现效果图
鼠标移入,暂停滚动; 鼠标移出,继续滚动;
2.原理
要实现无缝衔接,在原有ul后面还要有一个一样内容的ul;
最外层div为可视区域,设overflow:hidden;
2个ul的高度 > 外层可视div高度,才能滚动;
3.实现代码
html:
- 1
- 2
- 3
- 4
- 5
css:
div { /* 必须 */ 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); },