背景：

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

原理：

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

實(shí)現(xiàn)：

html主要包含三塊：

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

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

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

代碼：

class Roll { constructor(opts) { this.elem = opts.elem; // 圖片包含滾動(dòng)長度的元素的 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; // 如果向上滾或者向左滾動(dòng)每次減1，向下滾或者向右滾動(dòng)每次加1 if(this.direction === ’top’ || this.direction === ’left’){ this.speed = -1; }else{ this.speed = 1; } } roll(){ switch (this.direction) { case 'top':// 如果滾動(dòng)的盒子的top值超出元素的高度，則置為0if(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':// 如果滾動(dòng)的盒子的bottom值超出元素的高度，則置為0if(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':// 如果滾動(dòng)的盒子的left超出元素的高度，則置為0if(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':// 如果滾動(dòng)的盒子的right超出元素的高度，則置為0if(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:// 默認(rèn)向上滾動(dòng)，如果滾動(dòng)的盒子的top超出元素的高度，則置為0if(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

總結(jié)

到此這篇關(guān)于JS實(shí)現(xiàn)單張或多張圖片持續(xù)無縫滾動(dòng)的文章就介紹到這了,更多相關(guān)js 圖片 無縫滾動(dòng)內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！