本文详解利用JavaScript实现图片无缝滚动的核心原理与具体代码。重点阐述为何避免CSS动画以保证重置时的平滑性，并通过复制首尾元素实现拼接。提供完整的Roll类封装代码，涵盖初始化、滚动逻辑及启停控制，适用于单张或多张图片的持续滚动场景。
JS实现图片无缝滚动：原理与代码详解
背景说明：
在开发图片持续滚动功能时，若采用JavaScript方案，应严格避免引入CSS动画或过渡效果。为确保滚动视觉上的平滑，建议采用逐像素移动的方式。若叠加CSS过渡动画，当滚动位置重置归零时，会出现反向回退的动画效果，这与预期的无缝循环逻辑相悖。
无缝滚动核心原理
核心原理：
图片无缝滚动的逻辑与图片轮播相似，同样适用于文字列表等滚动场景。实现关键在于数据的复制与拼接：将最后一张图片（或文字块）克隆并插入到列表头部，或将第一张克隆插入到尾部。此方法生效需满足两个前提条件：第一，滚动容器不得设置CSS过渡动画；第二，当滚动高度重置为0时，视觉上的位置变化必须保持连续，即重置瞬间与当前滚动位置在视觉上无明显跳变。
HTML结构与实现方案
具体实现方案：
HTML结构主要划分为三个层级：
1. 最外层容器：作为滚动区域的展示窗口，需设置overflow:hidden以隐藏溢出内容。
2. 滚动内容容器：通过修改该容器的定位属性（如top或transform）来驱动滚动动画，内部包含所有待展示的图片或文本元素。
3. 内容包裹层：用于具体承载图片或文字内容的DOM节点。
核心代码实现：
JavaScript核心代码实现
class Roll {
constructor(opts) {
this.elem = opts.elem; // 图片包含滚动长度的元素的
this.elemBox = opts.elemBox; //图片展示区域元素，为了获取展示区域的高度
this.direction = opts.direction;
this.time = opts.time;
this.init();
this.roll = this.roll.bind(this)
this.startRoll = this.startRoll.bind(this)
this.stopRoll = this.stopRoll.bind(this)
}
init(){
this.elemHeight = this.elem.offsetHeight;
this.elemHtml = this.elem.innerHTML;
this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
// 如果向上滚或者向左滚动每次减1，向下滚或者向右滚动每次加1
if(this.direction === 'top' || this.direction === 'left'){
this.speed = -1;
}else{
this.speed = 1;
}
}
roll(){
switch (this.direction) {
case "top":
// 如果滚动的盒子的top值超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';
}
break;
case "bottom":
// 如果滚动的盒子的bottom值超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
this.elemBox.style.bottom = 0;
}else{
this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';
}
break;
case "left":
// 如果滚动的盒子的left超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
this.elemBox.style.left = 0;
}else{
this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';
}
break;
case "right":
// 如果滚动的盒子的right超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
this.elemBox.style.right = 0;
}else{
this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';
}
break;
default:
// 默认向上滚动，如果滚动的盒子的top超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer = setInterval(this.roll,this.time)
}
}参考链接：
https://www.teakki.com/p/590beb7be8136dfc5f21770d
总结：
本文介绍了基于JavaScript实现单张或多张图片持续无缝滚动的完整方案。通过理解复制拼接原理及避免CSS动画干扰，可构建稳定的滚动效果。如需了解更多相关技术细节，建议查阅本站往期文章或继续浏览后续内容。