Native JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielen

Funktion

• Standardmäßig bewegt sich die Endlosschleife nach rechts
• Klicken Sie auf die Zahl, um Wechseln Sie zum entsprechenden Bild
• Klicken Sie nach links und rechts, um die Bilder zu wechseln

Prinzip

Lassen Sie uns zunächst über das Prinzip sprechen.

1. Alle Bilder überlappen sich im Layout, d. h. solange sie in Y-Richtung ausgerichtet sind, hat das aktuell sichtbare Bild die höchste Z-Index-Ebene.
2. Ändern Sie alle 3 Sekunden ein Bild und verwenden Sie setTimeout für das Timing.
3. Verwenden Sie gIndex, um den Index des Bildes aufzuzeichnen, das im aktuell sichtbaren Bereich angezeigt wird, und berechnen Sie den Index des nächsten Bilds bei jeder Änderung.
4. Erzielen Sie eine Bildwechselanimation über requestAnimationFrame.

Diese Methode kann auch sicherstellen, dass die gesamte Seite immer nur 2 img-Tags hat, ohne dass alle img-Knoten erstellt werden müssen. Der entscheidende Punkt besteht darin, den src des unsichtbaren img jedes Mal zu ersetzen.

Implementierung der Animation

1. Definieren Sie zunächst einen Zeitstempel. Dieser Wert zeichnet auf, wie weit sich jedes Bild bewegt. Definieren Sie den Anfangsschritt=0 und notieren Sie die Anzahl der Bewegungsschritte.
2. Die Distanz moveWidth jeder Bewegung ist Zeitstempel*Schritt. Bild 1 bewegt sich nach rechts, um moveWidth zu erhöhen, und Bild 2 tritt von links in moveWidth ein. Daher ist die Transformation von Bild 1 translator(moveWidth) und die Transformation von Bild 2 ist translator(moveWidth-Bildbreite).
3. Schritt+1
4. Wenn moveWidth> Bildbreite, Schritt 5, andernfalls fordert requestAnimationFrame die nächste Ausführung an, fahren Sie mit 2-4 fort.
5. Beide Bilder 1 und 2 werden positioniert An der Startposition ist der Z-Index von Bild 2 auf den höchsten Wert eingestellt.

Damit ist eine bewegende Animation abgeschlossen.

HTML-Code

<header>
    <p>
        <img  alt="Native JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielen" >
        <img  alt="Native JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielen" >
        <img  alt="Native JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielen" >
        <img  alt="Native JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielen" >
    </p>
    <p>
        </p>
<p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    
    <p>
        </p>
<p></p>
    
    <p>
        </p>
<p></p>
    
</header>

JS-Code

var timeout = null;
window.onload = function () {
    var oLeft = document.querySelector('.left');
    var oRight = document.querySelector('.right');
    var oButton = document.querySelector('.buttons');
    var oButtons = document.querySelectorAll('.buttons p');
    var oImgs = document.querySelectorAll('.box img');
    var imgWidth = oImgs[0].width;
    var gIndex = 0;
    begainAnimate();

    // 绑定左右点击事件
    oLeft.onclick = function () {
        clearTimeout(timeout);
        leftMove();
        begainAnimate();
    };
    oRight.onclick = function () {
        clearTimeout(timeout);
        rightMove();
        begainAnimate();
    };
    // 绑定数字序号事件
    oButton.onclick = function (event) {
        clearTimeout(timeout);
        var targetEl = event.target;
        var nextIndex = (+targetEl.innerText) - 1;
        console.log(nextIndex);
        rightMove(nextIndex);
        begainAnimate();
    }
    // 默认初始动画朝右边
    function begainAnimate() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            rightMove();
            begainAnimate();
        }, 3000);
    }
    // 向左移动动画
    function leftMove() {
        var nextIndex = (gIndex - 1 = oImgs.length) ? 0 : gIndex + 1;
        }
        animateSteps(nextIndex, 50);
    }
    // 一次动画
    function animateSteps(nextIndex, timestamp) {
        var currentImg = oImgs[gIndex];
        var nextImg = oImgs[nextIndex];
        nextImg.style.zIndex = 10;
        var step = 0;
        requestAnimationFrame(goStep);
        // 走一帧的动画，移动timestamp
        function goStep() {
            var moveWidth = timestamp * step++;
            if (Math.abs(moveWidth)  0 ? (moveWidth - imgWidth) : (imgWidth + moveWidth)}px)`;
                requestAnimationFrame(goStep);
            } else {
                currentImg.style.zIndex = 1;
                currentImg.style.transform = `translate(0px)`;
                nextImg.style.transform = `translate(0px)`;
                oButtons[gIndex].setAttribute('class', '');
                oButtons[nextIndex].setAttribute('class', 'active');
                gIndex = nextIndex;
            }
        }
    }
}
window.onclose = function () {
    clearTimeout(timeout);
}

CSS-Layoutstil

<style>
    /* 首先设置图片box的区域，将图片重叠在一起  */
    header {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .box {
        width: 100%;
        height: 300px;
    }
    .box img {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translateX(0);
        z-index: 1;
    }
    .box img:first-child {
        z-index: 10;
    }
    
    /* 数字序列按钮 */
    .buttons {
        position: absolute;
        right: 10%;
        bottom: 5%;
        display: flex;
        z-index: 100;
    }

    .buttons p {
        width: 30px;
        height: 30px;
        background-color: #aaa;
        border: 1px solid #aaa;
        text-align: center;
        margin: 10px;
        cursor: pointer;
        opacity: .7;
        border-radius: 15px;
        line-height: 30px;
    }

    .buttons p.active {
        background-color: white;
    }

    /* 左右切换按钮 */
    .left,
    .right {
        position: absolute;
        width: 80px;
        height: 80px;
        background-color: #ccc;
        z-index: 100;
        top: 110px;
        border-radius: 40px;
        opacity: .5;
        cursor: pointer;
    }

    .left {
        left: 2%;
    }

    .right {
        right: 2%;
    }

    .left .arrow {
        width: 30px;
        height: 30px;
        border-left: solid 5px #666;
        border-top: solid 5px #666;
        transform: translate(-5px, 25px) rotate(-45deg) translate(25px, 25px);
    }

    .right .arrow {
        width: 30px;
        height: 30px;
        border-left: solid 5px #666;
        border-top: solid 5px #666;
        transform: translate(50px, 25px) rotate(135deg) translate(25px, 25px);
    }
</style>

Empfohlenes Tutorial: „js-Tutorial“

Das obige ist der detaillierte Inhalt vonNative JS verwendet Transformation, um einen unendlichen Scrolleffekt des Banners zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!