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
Keine Lücken auf beiden Seiten, Lücken zwischen j...
Teil 3: ❤Drei Möglichkeiten, den Backend-Datenemp...
Inhaltsverzeichnis 1. Hintergrund 2. Zusammengese...
BEM von QQtabBar Zunächst einmal: Was bedeutet BE...
1. Abgerundeter Rand: CSS- CodeInhalt in die Zwis...
Inhaltsverzeichnis Umgebungsvorbereitung Start 1....
Inhaltsverzeichnis 1. mysqldump-Befehl zum Sicher...
--Backup der Homepage 1.txt-Text 2. Scannen Sie da...
Es gibt einige Unterschiede zwischen Filter und H...
Inhaltsverzeichnis Installieren Sie CentOS7 Konfi...
In MySQL können Sie die Funktionen IF(), IFNULL()...
MySQL-Dienst stoppen Klicken Sie in Windows mit d...
Vor einigen Tagen teilte die Bibliothek mit, dass...
Inhaltsverzeichnis 1. Einleitung 2. Lösung 2.1 Ko...
Dieses Skript kann die Vorgänge zum Starten, Stop...