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:
|
<<: Implementierungscode für den MySQL-Protokolltrigger
>>: So veröffentlichen Sie ein lokal erstelltes Docker-Image auf Dockerhub
Während des Entwicklungsprozesses stoße ich häufi...
Manchmal benötigen unsere Seiten Eingabeaufforder...
0. Übersicht Zabbix ist ein extrem leistungsfähig...
HTML und CSS 1. Verständnis und Kenntnisse von WE...
Daten exportieren Einen Fehler melden VARIABLEN W...
Wie lädt man das JAR-Paket in ein privates Lager ...
Vorwort add_header ist eine Direktive, die im Hea...
Die SSH-Public-Key-Authentifizierung ist eine der...
Dieser Artikel beschreibt anhand von Beispielen, ...
Inhaltsverzeichnis 1 Element Offset-Serie 1.1 Off...
Griechische Buchstaben sind eine sehr häufig verw...
Wie unten dargestellt: XML/HTML-CodeInhalt in die...
Schauen wir uns zunächst den GIF-Vorgang an: Fall...
Einführung Einfach ausgedrückt ist tcpdump ein Pa...
Inhaltsverzeichnis Erstellen eines Layouts CSS-St...