原⽣js实现列表⾃动滚动循环播放1.实现效果图
⿏标移⼊，暂停滚动； ⿏标移出，继续滚动；
2.原理
要实现⽆缝衔接，在原有ul后⾯还要有⼀个⼀样内容的ul；
最外层div为可视区域，设overflow：hidden；
html滚动效果代码
2个ul的⾼度 > 外层可视div⾼度，才能滚动；
3.实现代码
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(){
},
beforeDestroy(){
if(this.timer)clearInterval(this.timer);
},
//vue methods
roll(t){
var ul1 = ElementById("comment1"); var ul2 = ElementById("comment2"); var ulbox = ElementById("review_box");    ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop =0;
},
rollStart(t){
var ul1 = ElementById("comment1"); var ul2 = ElementById("comment2"); var ulbox = ElementById("review_box"); llStop();
this.timer =setInterval(()=>{
// 当滚动⾼度⼤于列表内容⾼度时恢复为0
if(ulbox.scrollTop >= ul1.scrollHeight){
ulbox.scrollTop =0;
}else{
ulbox.scrollTop++;
}
}, t);
},
rollStop(){
clearInterval(this.timer);
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。