Javascript zum Wechseln von Bildern per Mausklick

Javascript zum Wechseln von Bildern per Mausklick

In diesem Artikelbeispiel wird der spezifische Javascript-Code zur Realisierung des Umschaltens von Bildern durch Klicken auf Schaltflächen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Effektbild:

Bauen Sie zuerst die Grundstruktur

<div id="div">
        <p id="desc"></p>
        <!--Standardmäßig das erste Bild anzeigen-->
        <img src="img/1.jpg" alt="Laden fehlgeschlagen" style="width: 800px;height: 400px;">
        <button id="pre">Zurück</button>
        <button id="next">Weiter</button>
</div>

Als nächstes legen Sie den Anzeigestil fest

<Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
    
        #div {
            Breite: 800px;
            Höhe: 420px;
            Rand: 20px automatisch;
            Hintergrundfarbe: rgb(243, 119, 36);
            Textausrichtung: zentriert;
        }
    
        Schaltfläche: schweben {
            Cursor: Zeiger;
        }
</Stil>

Der wichtigste Teil von JavaScript

<Skript>
        //Vorladen, führe das Skript aus, nachdem die Seite geladen wurde window.onload = function () {
         
            var num = document.getElementsByTagName("img")[0];
            // Obwohl es hier nur ein img-Tag gibt, ist das Ergebnis der Variablen num immer noch ein Array // Definiere die Bildadresse var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"];

            //Schaltfläche abrufen var prev = document.getElementById("pre");
            var nächstes = document.getElementById("nächstes");
            Var-Index = 0;
            
            //Bildbeschreibung var p_desc = document.getElementById("desc");
            p_desc.innerHTML = "Gesamt" + shuzu.length + "Bilder" + ", aktuell ist " + (Index + 1) + "Bild";
            //Beachten Sie, dass die Zeichenfolge davor verkettet ist und Klammern benötigt werden, um die Addition zu implementieren. //Klicken Sie, um zwischen den Bildern zu wechseln. prev.onclick = function () {
                Index--;
                //Hier lasse ich es eine Schleife laufen, wenn (Index < 0)
                    Index = shuzu.Länge – 1;
                num.src = shuzu[index];
                p_desc.innerHTML = "insgesamt" + shuzu.length + "Bilder" + ", das aktuelle ist " + (Index + 1) + ""; //Beachten Sie, dass die Zeichenfolge davor verkettet ist und Klammern erforderlich sind, um die Addition zu implementieren}

            weiter.onclick = Funktion () {
                Index++;
                wenn (Index > shuzu.Länge - 1)
                    Index = 0;
                num.src = shuzu[index];
                p_desc.innerHTML = "insgesamt" + shuzu.length + "Bilder" + ", das aktuelle ist " + (Index + 1) + ""; //Beachten Sie, dass die Zeichenfolge davor verkettet ist und Klammern erforderlich sind, um die Addition zu implementieren}
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der benutzerdefinierten Swiper-Komponente in JavaScript
  • Detaillierte Erklärung des Unterschieds zwischen Pfeilfunktionen und normalen Funktionen in JavaScript
  • Karusselleffekte mit JavaScript implementieren
  • Zusammenfassung verschiedener Methoden für JavaScript um festzustellen ob es sich um ein Array handelt
  • JavaScript zum Erzielen von Feuerwerkseffekten (objektorientiert)
  • JavaScript Canvas implementiert Tic-Tac-Toe-Spiel
  • Detaillierte Diskussion der Unterschiede zwischen Schleifen in JavaScript
  • Zusammenfassung einiger gängiger Möglichkeiten zum Abkürzen von Javascript-Code
  • 13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen

<<:  Implementierungscode für den MySQL-Protokolltrigger

>>:  So veröffentlichen Sie ein lokal erstelltes Docker-Image auf Dockerhub

Artikel empfehlen

Linux-Plattform MySQL ermöglicht Remote-Login

Während des Entwicklungsprozesses stoße ich häufi...

CSS erstellt Tippboxen, Bubble-Boxen und Dreiecke

Manchmal benötigen unsere Seiten Eingabeaufforder...

Die umfassendste Sammlung von Front-End-Interviewfragen

HTML und CSS 1. Verständnis und Kenntnisse von WE...

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Wie lädt man das JAR-Paket in ein privates Lager ...

Detaillierte Erklärung der grundlegenden Verwendung des SSH-Befehls ssh-keygen

Die SSH-Public-Key-Authentifizierung ist eine der...

MySQL etabliert eine effiziente Indexbeispielanalyse

Dieser Artikel beschreibt anhand von Beispielen, ...

Detaillierte Erklärung dreier häufig verwendeter Webeffekte in JavaScript

Inhaltsverzeichnis 1 Element Offset-Serie 1.1 Off...

So verwenden Sie griechische Buchstaben in HTML-Seiten

Griechische Buchstaben sind eine sehr häufig verw...

Über das Problem der vertikalen Zentrierung von img und span in div

Wie unten dargestellt: XML/HTML-CodeInhalt in die...

Zusammenfassung der MySQL-Injection-Bypass-Filtertechniken

Schauen wir uns zunächst den GIF-Vorgang an: Fall...

Detaillierte Analyse und Verwendung des Befehls tcpdump unter Linux

Einführung Einfach ausgedrückt ist tcpdump ein Pa...

JavaScript implementiert eine Seiten-Scrolling-Animation

Inhaltsverzeichnis Erstellen eines Layouts CSS-St...