背景：

想要實現(xiàn)圖片持續(xù)滾動，既然使用js,就千萬不要加css動畫、過渡等相關(guān)樣式，如果想要滾動的平滑一下，可以一像素一像素的感動，則很平滑，如果加了過渡動畫，當圖片重置為0時，會有往回倒的動畫效果，跟預(yù)期不符。

推薦：《javascript高級教程》

原理：

圖片滾動原理同圖片輪播原理，同樣也適用于文字滾動等一系列滾動，通過復(fù)制最后一張圖片或最后一堆文字插入第一行，或復(fù)制第一張圖片或一堆文字插入在結(jié)尾，來實現(xiàn)無縫拼接，前提：1、必須是沒有設(shè)置過渡動畫的，2、重置為0的時候與當前已經(jīng)滾動到的高度對于圖片的位置而言肉眼看上去沒變化。

實現(xiàn)：

html主要包含三塊：

1、最外層盒子，用來展示滾動圖的區(qū)域，overflow:hidden;

2、滾動的盒子，主要改變該盒子的定位值，來實現(xiàn)滾動，里面包含所有要滾動的圖片或文字

3、包含圖片或文字的盒子。

代碼：

class Roll {     constructor(opts) {         this.elem = opts.elem; // 圖片包含滾動長度的元素的         this.elemBox = opts.elemBox; //圖片展示區(qū)域元素，為了獲取展示區(qū)域的高度         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)     } }