JavaScript により、1 つまたは複数の画像を継続的かつシームレスにスクロールできます

背景:

画像の連続スクロールを実現したい場合は、js を使用しているため、 CSS アニメーションを追加します。 、トランジション、およびその他の関連スタイルを追加します。スクロールを滑らかにしたい場合は、ピクセルごとにスクロールすると、非常にスムーズになります。トランジション アニメーションを追加すると、画像が 0 にリセットされると、逆方向のアニメーション効果である可能性があり、期待は満たされませんでした。

推奨: 「javascript 上級チュートリアル」

原則:

画像スクロールの原則は次のとおりです。画像と同じカルーセルの原理は、テキスト スクロールなどの一連のスクロールにも当てはまります。最後の画像またはテキストの最後の束をコピーして最初の行に挿入するか、最初の画像をコピーするか、またはテキストの最後の束をコピーすることで、シームレスなスプライシングを実現できます。前提条件: 1. トランジション アニメーションが設定されていないこと、2. 0 にリセットされた場合、現在スクロールされている画像の位置は変更されていないように見えること肉眼では。

実装:

html には主に 3 つの部分が含まれています:

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

以上がJavaScript により、1 つまたは複数の画像を継続的かつシームレスにスクロールできますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。