js ermöglicht ein nahtloses Scrollen von Bildern

Implementierungsprinzip:

Das Bildlaufprinzip ist das gleiche wie das Bildkarussellprinzip. Es ist auch auf eine Reihe von Bildläufen anwendbar, z. B. durch Kopieren das letzte Bild oder das letzte Fügen Sie eine Reihe von Texten in die erste Zeile ein oder kopieren Sie das erste Bild oder eine Reihe von Texten und fügen Sie sie am Ende ein, um eine nahtlose Verbindung zu erreichen.

Voraussetzungen: 1. Es darf keine Übergangsanimation eingestellt sein. 2. Beim Zurücksetzen auf 0 scheint sich die Position des Bildes mit bloßem Auge von der Höhe, auf die es gescrollt wurde, nicht zu ändern.

Implementierung:

html enthält hauptsächlich drei Teile:

1. Das äußerste Feld wird verwendet, um den Bereich des Bildlaufbilds anzuzeigen, overflow:hidden;

2. Das Bildlauffeld ändert hauptsächlich den Positionierungswert des Feldes, um einen Bildlauf zu erreichen, der alle zu scrollenden Bilder oder Texte enthält.

Das Feld enthält Bilder oder Text.

Spezifischer Code:

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

Empfohlenes Tutorial: js-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonjs ermöglicht ein nahtloses Scrollen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!