JavaScript permet un défilement continu et transparent d'une ou plusieurs images

Contexte :

Si vous souhaitez obtenir un défilement continu des images, puisque vous utilisez js, n'ajoutez jamais de CSS animation, transition et autres styles associés Si vous souhaitez fluidifier le défilement, vous pouvez le déplacer pixel par pixel, ce qui sera très fluide. Si vous ajoutez une animation de transition, lorsque l'image est réinitialisée à 0, il y aura un retour en arrière. effet d'animation et les attentes n'ont pas été satisfaites.

Recommandé : "Tutoriel avancé Javascript"

Principe :

Le principe du défilement des images est identique à l'image Le principe du carrousel s'applique également à une série de défilements tels que le défilement de texte. Un épissage transparent peut être obtenu en copiant la dernière image ou le dernier groupe de texte et en l'insérant dans la première ligne, ou en copiant la première image ou. un tas de texte et en l'insérant à la fin, Conditions préalables : 1. Il ne doit y avoir aucun jeu d'animation de transition, 2. Lorsqu'il est réinitialisé à 0, la position de l'image vers laquelle on a défilé actuellement ne semble pas avoir changé. à l'oeil nu.

Implémentation :

html contient principalement trois parties :

1 La boîte la plus à l'extérieur est utilisée pour afficher la zone de défilement, overflow:hidden ;

2. Une boîte de défilement, qui modifie principalement la valeur de positionnement de la boîte pour réaliser le défilement. Elle contient toutes les images ou le texte à faire défiler

3.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!