Dynamisches benutzerdefiniertes Karussell – HTML & Javascript

<div class="links">
    <div class="previous-post" onclick="showPrevious();">
        <div style="display: contents; cursor: pointer;">
            <p>
                <b>previous post</b>
            </p>

            <p id="previous-post-title"></p>
        </div>
    </div>

    <div class="next-post" onclick="showNext();" style="margin-left: 100px;">
        <div style="display: contents; cursor: pointer;">
            <p>
                <b>next post</b>
            </p>

            <p id="next-post-title"></p>
        </div>
    </div>
</div>

Verwenden der PHP-Variablen in Javascript

Jetzt kommen wir zu dem Teil, in dem wir versprochen haben, Ihnen beizubringen, wie Sie eine PHP-Variable in eine Javascript-Variable konvertieren können. Wenn Sie dem Tutorial bisher gefolgt sind, haben Sie möglicherweise bereits ein $ posts PHP-Array und möchten dieses jetzt in Ihrem Javascript-Code verwenden. Wir erstellen einfach ein verstecktes Eingabefeld, geben ihm eine ID, damit wir es in Javascript abrufen und den Wert darauf setzen können PHP Array. Aber da $ posts ein Array ist, müssen wir das in konvertieren JSON Format können wir dies einfach durch Aufrufen einer in PHP integrierten Funktion tun json_encode. Wenn das Array jetzt in JSON konvertiert wird, können einige Zeichen Probleme verursachen, wenn Sie es als Wert für das Eingabefeld festlegen. Sie müssen Ihre Funktion also in eine andere in PHP integrierte Funktion einbinden htmlentities.

<input type="hidden" id="posts" value="<?php echo htmlentities(json_encode($posts)); ?>">

Nächste und vorherige Folie

Wenn die Seite geladen wird, erhalten wir diesen Eingabefeldwert anhand seiner ID. Da wir ihn in JSON konvertiert haben, müssen wir ihn jetzt in Javascript-Objekten oder -Arrays analysieren. Wir können das tun, indem wir einfach eine Funktion aufrufen JSON.parse und es wird die PHP-Variable in eine richtige konvertieren Javascript Variable. Jetzt können Sie dieses Array überall in Ihrem Javascript-Code verwenden. Der folgende Code zeigt den nächsten Indikator nur an, wenn danach eine Folie vorhanden ist. Ebenso wird der vorherige Indikator nur angezeigt, wenn zuvor eine Folie vorhanden ist.

<script>
    var currentIndex = 0;

    window.addEventListener("load", function () {
        postsArray = document.getElementById("posts").value;
        postsArray = JSON.parse(postsArray);

        renderTitle();
    });

    function showPrevious() {
        currentIndex--;

        var previous = document.querySelector(".post.active").previousElementSibling;
        document.querySelector(".post.active").className = "post";
        previous.className = "post active";

        renderTitle();
    }

    function showNext() {
        currentIndex++;

        var next = document.querySelector(".post.active").nextElementSibling;
        document.querySelector(".post.active").className = "post";
        next.className = "post active";

        renderTitle();
    }

    function renderTitle() {
        document.querySelector(".previous-post").style.visibility = "hidden";
        document.querySelector(".next-post").style.visibility = "hidden";

        if (postsArray[currentIndex + 1] != null) {
            document.querySelector(".next-post").style.visibility = "visible";
            document.getElementById("next-post-title").innerHTML = postsArray[currentIndex + 1].title;
        }

        if (postsArray[currentIndex - 1] != null) {
            document.querySelector(".previous-post").style.visibility = "visible";
            document.getElementById("previous-post-title").innerHTML = postsArray[currentIndex - 1].title;
        }
    }
</script>

Erläuterung

Sie können auch die Funktion renderTitle () sehen, auf die wir später zurückkommen werden. Zuerst haben wir eine Variable mit dem Namen erstellt currentIndex und initialisieren Sie es mit 0, dh dem Index der aktuellen Folie, der für den Benutzer sichtbar ist. Wenn auf den nächsten oder vorherigen Indikator geklickt wird, rufen wir eine Funktion auf, die den Wert von currentIndex erhöht, wenn auf den nächsten Indikator geklickt wird, und den Wert verringert, wenn auf den vorherigen Indikator geklickt wird. Dann bekommen wir die

[ad_2]