您现在的位置是：网站首页> 编程资料编程资料
js实现列表自动滚动循环播放_javascript技巧_
2023-05-24
395人已围观
简介 js实现列表自动滚动循环播放_javascript技巧_
本文实例为大家分享了js实现列表自动滚动循环播放的具体代码，供大家参考，具体内容如下
1.实现效果图
鼠标移入，暂停滚动； 鼠标移出，继续滚动；
2.原理
- 要实现无缝衔接，在原有ul后面还要有一个一样内容的ul；
- 最外层div为可视区域，设overflow：hidden；
- 2个ul的高度 > 外层可视div高度，才能滚动；
3.实现代码
html：
- 1
- 2
- 3
- 4
- 5
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); },以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
