本文详解如何利用JavaScript实现列表的自动无缝滚动与循环播放效果。核心原理是通过复制列表内容实现视觉上的无缝衔接，结合定时器控制滚动速度，并监听鼠标移入移出事件以暂停或恢复滚动。文章提供了基于Vue框架的完整HTML、CSS及JS实现代码，适用于评论列表、新闻公告等场景。
列表无缝滚动实现概述
本文分享了一段使用JavaScript实现列表自动滚动及循环播放的具体代码，供读者参考学习。
首先展示实现后的效果演示。
交互逻辑为：当鼠标移入列表区域时，滚动暂停；当鼠标移出列表区域时，滚动继续。
无缝滚动原理分析
接下来分析实现该效果的核心原理。
- 为了实现视觉上的无缝衔接，需要在原有的ul元素后方追加一个内容完全相同的ul元素。
- 最外层的div容器需设置overflow为hidden，以隐藏超出可视区域的内容。
- 两个ul元素的总高度必须大于外层div的可视高度，这样才能产生滚动效果。
完整代码实现
以下是具体的实现代码部分。
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;/* 必须 */
}JavaScript逻辑如下：
//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);
},以上就是本文的全部内容，希望能为读者的学习提供帮助，也欢迎大家多多支持本站。