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
Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags
Dieser Artikel stellt einige Aspekte von HTML-Tag...
Analyse der Fallstricke beim Rundungsvorgang der ROUND-Funktion in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...
Neue Funktionen in MySQL 8.0: Hash Join
Das MySQL-Entwicklungsteam hat am 14. Oktober 201...
Tipps zur Kurzschrift in JavaScript
Inhaltsverzeichnis 1. Arrays zusammenführen 2. Ar...
Detaillierte Erläuterung der Verwendung und Vorsichtsmaßnahmen von Crontab unter Linux
Crontab ist ein Befehl zum Einrichten einer perio...
WeChat-Applet implementiert Puzzlespiel
In diesem Artikel finden Sie den spezifischen Cod...
So beheben Sie den Fehler "ERROR 1045 (28000)" beim Anmelden bei MySQL
Heute habe ich mich beim Server angemeldet und mi...
So starten und starten Sie nginx unter Linux neu
Nginx (Engine x) ist ein leistungsstarker HTTP- u...
vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus
In diesem Artikelbeispiel wird der spezifische Co...
Verwendung der MySQL SHOW STATUS-Anweisung
Um die Leistung von MySQL anzupassen und den Dien...
So lösen Sie das Problem „Unbekannte Spalte ‚Passwort‘ beim Zurücksetzen des MySQL-Root-Passworts
Als ich nachts meinen MAC einschaltete, stellte i...
Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung
Ziehen Sie das Bild Docker-Pull MySQL Sehen Sie s...
Detaillierte Erklärung zur Installation von PHP7 unter Linux
Wie installiere ich PHP7 unter Linux? 1. Installi...
Die Tabelle fügt Zellen und das img-Bild zusammen, um das gesamte td-HTML auszufüllen
Quellcode (einige Klassen gelöscht): Code kopieren...
So kehren Sie schnell von unten nach oben zurück, wenn die Webseite zu viele Inhalte enthält
Bei der Web-Frontend-Entwicklung ist es unvermeidl...