js实现图片无缝滚动

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)
 }
}