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
Details zu 7 Arten der Komponentenkommunikation in Vue3
Inhaltsverzeichnis 1. Kommunikationsmethode für V...
Linux Bash: ./xxx: Fehler „Binärdatei kann nicht ausgeführt werden“
Heute habe ich einem Kunden ein kleines Tool für ...
So stoppen Sie die CSS-Animation mittendrin und behalten die Haltung bei
Vorwort Ich bin einmal auf ein schwieriges Proble...
So erstellen Sie Gitlab auf CentOS6
Vorwort Das ursprüngliche Projekt wurde im öffent...
Empfohlene Plugins und Anwendungsbeispiele für Vue-Unit-Tests
Inhaltsverzeichnis rahmen Erstklassiges Fehlerrep...
So starten Sie mehrere MySQL-Datenbanken auf einem Linux-Host
Lassen Sie uns heute darüber sprechen, wie Sie vi...
So installieren Sie MySQL 8.0 und melden sich bei MySQL unter MacOS an
Folgen Sie dem offiziellen Tutorial, laden Sie da...
Ausführliche Erläuterung zum MySQL-Lernen einer Datenbanksicherung
Inhaltsverzeichnis 1.DB, DBMS, SQL 2. Eigenschaft...
Eine kurze Einführung in den allgemeinen Prozess der Web-Frontend-Webentwicklung
Ich sehe viele Anfänger in der Front-End-Entwicklu...
So kapseln Sie die Karussellkomponente in Vue3
Zweck Kapseln Sie die Karussellkomponente und ver...
Implementierung der Vue-Einzeldateikomponente
Ich habe kürzlich über Vue gelesen. Ich habe eine...
Die Verwendung der Vue-Direktive v-bind und zu beachtende Punkte
Inhaltsverzeichnis 1. v-bind: kann einige Daten a...
Eine einfache Möglichkeit, mit dem HTML-Tag „Marquee“ einen Scroll-Effekt zu erzielen (unbedingt lesen)
Der automatische Bildlaufeffekt der Seite kann du...
Layui implementiert Beispielcode für Abfragen mit mehreren Bedingungen
Ich habe vor kurzem ein Dateisystem erstellt und ...
MySQL-Lerndatenbankbetrieb DML ausführliche Erklärung für Anfänger
Inhaltsverzeichnis 1. Anweisung einfügen 1.1 Einf...