Heim > Web-Frontend > js-Tutorial > js ermöglicht ein nahtloses Scrollen von Bildern

js ermöglicht ein nahtloses Scrollen von Bildern

王林
Freigeben: 2020-05-11 09:15:50
nach vorne
2228 Leute haben es durchsucht

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)
    }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage