JSは1枚または複数の画像の連続的なシームレスなスクロールを実現するコード例を示します。

背景:
画像の継続的なスクロールを実現するには、jsを使用する以上、cssアニメーション、移行などの関連したスタイルを絶対に入れないでください。もし転がりたいならば、一画素の感動ができます。移行動画を追加したら、画像が0にリセットされると、逆方向の動画効果が期待されていません。
原理:
写真のスクロール原理は写真のロードショーの原理と同じで、テキストのスクロールなど一連のスクロールにも適用されます。最後の写真または最後のテキストをコピーして最初の行に挿入したり、最初の写真またはテキストをコピーして最後の行に挿入したりして、シームレスなスティッチングを実現します。前提：1、遷移アニメーションを設定していない必要があります。2、0にリセットすると、現在スクロールされている高さは、画像の位置に対して肉眼的に変わりません。
実装:
htmlは主に三つのピースを含みます。
1、一番外側の箱で、スクロール図のエリア、overflow：hiddenを示す。
2、スクロールする箱は主にこの箱の位置を変えて転がりを実現します。中にはスクロールする写真や文字が含まれています。
3、絵や文字を含む箱。
コード:

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
締め括りをつける
ここでJSについて、一枚以上の写真を継続的にシームレスにスクロールさせることができる文章を紹介します。もっと関連するjsの写真はシームレスにスクロールします。以前の文章を検索してください。または、下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。