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
1. Schnittstelle für die Anforderung einer Antwor...
So deklarieren Sie einen Cursor in MySQL: 1. Vari...
Inhaltsverzeichnis 1. Verwandte Binlog-Konfigurat...
■ Planung des Website-Themas Achten Sie darauf, da...
Normale MySQL-Sortierung, benutzerdefinierte Sort...
Inhaltsverzeichnis 1. Art von 2. Instanz von 3. U...
Im Allgemeinen können wir beim Herunterladen von ...
Globales Objekt Alle Module können aufgerufen wer...
Dabei wird das Bild als Hintergrund verwendet und...
Beim Schreiben von HTML-Code sollte die erste Zei...
ZeicheneffekteImplementierungscode JavaScript var...
Inhaltsverzeichnis Initialisieren des Projekts Sc...
Dieser Artikel stellt vor, wie Sie durch Instanzi...
Sprechen Sie über die Szene E-Mail senden Einbett...
Vorbereiten 1. Laden Sie das erforderliche Instal...