Galeriefunktion durch natives Js implementiert
|
Native Js implementiert die Galeriefunktion. Klicken Sie auf das Bild und das entsprechende vergrößerte Bild wird unten angezeigt. Binden Sie das Onclick-Ereignis an das A-Tag. Das kleine Bild oben und das große Bild unten sind dasselbe Bild, aber in den Stilen der beiden Bilder sind unterschiedliche Breiten und Höhen festgelegt. (Wenn Sie Breite und Höhe nicht festlegen möchten, können Sie das Bild auch im src des a-Tags als großes Bild speichern und img als kleines Bild anzeigen.) Verwenden Sie Js-Klickereignisse in Kombination mit CSS, um das große Bild anzuzeigen oder auszublenden und zwischen Bildern zu wechseln. Die Details sind wie folgt, und der Code ist beigefügt Der erste
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
img{
Breite: 200px;
Höhe: 100px;
}
#zeigeimg{
Breite: 500px;
Höhe: 240px;
/* Hintergrundfarbe: pink;*/
}
.verstecken{
Anzeige: keine;
}
.zeigen{
Anzeige: Block;
}
</Stil>
</Kopf>
<Text>
<div id = "Bildergalerie">
<a href="../../imgs/1.jpg" rel="externes Nofollow" title="Bild1">
<img src="../../imgs/1.jpg" alt="1">
</a>
<a href="../../imgs/2.jpg" rel="externes Nofollow" title="Bild2">
<img src="../../imgs/2.jpg" alt="2">
</a>
<a href="../../imgs/3.jpg" rel="externes Nofollow" title="Bild3">
<img src="../../imgs/3.jpg" alt="3">
</a>
<a href="../../imgs/4.jpg" rel="externes Nofollow" title="Bild4">
<img src="../../imgs/4.jpg" alt="4">
</a>
</div>
<!-- Schwebekörper löschen -->
<div style="clear: beide"></div>
<!--Verwenden Sie ein leeres Bild, um eine Position zu besetzen-->
<!-- <img id="image" src="" alt="" width="450px"> -->
<img id="zeigeimg" src="" class="hide" alt="">
<p id="desc"></p>
<Skript>
var Bildergalerie = document.getElementById("Bildergalerie");
var link = document.getElementsByTagName("a");
var showimg = document.getElementById("showimg");
var desc = document.getElementById("desc");
//Bei den innerhalb der For-Schleife hinzugefügten gebundenen Ereignissen waren beim Auslösen alle im Stapel hinzugefügten Ereignisse erfolgreich und die Ereignisse werden nach Ende der Schleife ausgelöst. //Wenn sich innerhalb der Ereignisfunktion der im Stapel gebundenen Ereignisse eine Variable i befindet, beachten Sie bitte, dass die Funktion nach Ende der Schleife ausgeführt wird. //Die innerhalb der Schleife definierte Variable ist eine globale Variable. Der Wert der nach der Schleife ausgeführten Variablen i ist der Wert, wenn i aus der Schleife herausspringt. image.src = links[i].href;
// für(var i = 0;i < link.length;i++){
// link[i].onclick = funktion(){
// // Alarm("123");
// // Ändern Sie den src-Attributwert im Bild // showimg.src = link[i].href;
// // Ändere die Textbeschreibung in desc // return false; // Bricht den Standardsprung des Labels a ab // }
// }
für(var i = 0;i < link.length;i++){
link[i].onclick = Funktion(){
// Alarm("123");
//Ändern Sie den src-Attributwert im Bildshowimg.src = this.href;//dieses Schlüsselwort bezieht sich auf die tatsächliche Ereignisquelle, die das Ereignis auslöst//Ändern Sie das Bilddisplayshowimg.className = "show";
// Ändern Sie die Textbeschreibung innerhalb der Beschreibung desc.innerText = this.title;
return false; //Den Standardsprung des Labels a abbrechen}
}
</Skript>
</body>
</html>
Der Zweite
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Einfaches Design einer Leuchtkastengalerie</title>
<Stil>
*{
Rand: 0;
}
#gesamt{
Breite: 100 %;
Hintergrundfarbe: grün;
Höhe: 1000px;
}
#fpic{
Rand links: 15 %;
}
.Bild{
Rand: 50px;
Breite: 100px;
Höhe: 100px;
}
#größer anzeigen{
Rand: automatisch;
Breite: 600px;
Höhe: 450px;
Hintergrundfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<div id="gesamt">
<h3 style="color: white;text-align:center;">Einfaches Galeriedesign</h3>
<hr Farbe="rot">
<img class="pic" id="fpic"src="trees/t1.jpg" onclick="meinefunktion(diese)" tabIndex=1 onblur="meinefunktion1(diese)">
<img class="pic" src="trees/t2.jpg" onclick="meinefunktion(diese)" tabIndex=1 onblur="meinefunktion1(diese)">
<img class="pic" src="trees/t3.jpg" onclick="meinefunktion(diese)" tabIndex=1 onblur="meinefunktion1(diese)">
<img class="pic" src="trees/t4.jpg" onclick="meinefunktion(diese)" tabIndex=1 onblur="meinefunktion1(diese)">
<img class="pic" src="trees/t5.jpg" onclick="meinefunktion(diese)" tabIndex=1 onblur="meinefunktion1(diese)">
<img class="pic" src="trees/t6.jpg" onclick="meinefunktion(diese)" tabIndex=1 onblur="meinefunktion1(diese)">
<div id="show-bigger"><img id="spic" src="trees/t1.jpg" style="width: 100%;height: 100%"></div>
</div>
</body>
<Skripttyp="text/javascript">
function myfunction(x){ //Ändere das Bild im Anzeigefeld und den Rand des ausgewählten Bildes document.getElementById("spic").src=x.src;
x.style.borderBottom="5px durchgehend rot";
}
function myfunction1(x){ //Nicht ausgewählte Rahmenattribute eliminieren x.style.border="none";
}
</Skript>
</html>
Oben sind die Details der von nativem Js implementierten Galeriefunktion aufgeführt. Weitere Informationen zur von Js implementierten Galeriefunktion finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
>>: Tutorial zur Installation und Konfiguration des mysql8.0-ZIP-Pakets für Windows x64
Artikel empfehlen
Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.
Manchmal möchten wir nicht, dass der Inhalt unser...
Importieren Sie die CSV-Datei mit Navicat in MySQL
In diesem Artikel wird der spezifische Code zum I...
Der Docker-Container wird direkt ausgeführt, um den öffentlichen IP-Vorgang über Ping abzurufen
Holen Sie sich die lokale öffentliche IP-Adresse ...
So dekomprimieren Sie mehrere Dateien mit dem Befehl „unzip“ in Linux
Lösung für das Problem, dass in Linux kein Entpac...
Detaillierte Erklärung der Winkelinhaltsprojektion
Inhaltsverzeichnis Einzelne Inhaltsprojektion Mul...
Dieser Artikel hilft Ihnen, den Quellcode von PReact10.5.13 zu verstehen
Inhaltsverzeichnis render.js-Teil create-context....
CSS-Pixel und Lösungen für verschiedene Probleme bei der Anpassung mobiler Bildschirme
Pixel Auflösung Mit der Monitorauflösung ist eige...
Attribute im Vue V-For-Loop-Objekt
Inhaltsverzeichnis 1. Werte innerhalb von Schleif...
Mehrere Möglichkeiten zur Verwendung von require/import-Schlüsselwörtern zum Importieren lokaler Bilder in einer v-for-Schleife
Inhaltsverzeichnis Problembeschreibung Methode 1 ...
js realisiert 3D-Soundeffekte durch audioContext
In diesem Artikel wird der spezifische Code von j...
So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis
CSS-Medienabfragen haben ein sehr praktisches Sei...
Vergleich zwischen Node.js und Deno
Inhaltsverzeichnis Vorwort Was ist Deno? Vergleic...
Einführung in das Hinzufügen neuer Benutzer zu MySql, das Erstellen von Datenbanken für Benutzer und das Zuweisen von Berechtigungen an Benutzer
1. Neuen Benutzer hinzufügen Nur lokalen IP-Zugri...
So erweitern Sie Vue Router-Links in Vue 3
Vorwort Das Tag <router-link> ist ein großa...
WeChat-Applet zur Bestimmung, ob die Mobiltelefonnummer legal ist Beispielcode
Inhaltsverzeichnis Szenario Wirkung Code Zusammen...