Ich habe meine Freizeit verwendet, um ein Beispiel für das Durchsuchen eines einzelnen Bildes zu schreiben, als ich JavaScript lernte:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<kopf>
<title> Bildergalerie </title>
<Meta name = "generator" content = "editPlus">
<Meta name = "Autor" content = "">
<Meta name = "keywords" content = "">
</Head>
<script Language = "JavaScript">
Funktionshow (waspic) {
var Source = waspic.GetAttribute ("href"); // Erhalten Sie den Wert des Attributs href des aktuell geklickten Elements
var placeholder = document.getElementById ("Platzhalter"); // das Ziel erhalten
Placeholder.SetatTribute ("SRC", Quelle); // Setzen Sie das Zielattribut SRC, um das Bild zu ändern
var text = waspic.getAttribute ("title"); // Erhalten Sie den Wert des Attributtitels des aktuell geklickten Elements
var Beschreibung = document.getElementById ("Beschreibung");
Beschreibung.
// oder Beschreibung.Childnodes [0] .nodeValue = text;
}
</script>
<body>
<h1> JavaScript Picture Gallery </h1>
<ul>
<li>
<a href = "Bilder/Fireworks.jpg" Onclick = "Showpic (this); return false;"> pic1 </a>
</li>
<li>
<a href = "bilder/coffee.jpg" onclick = "showpic (this); return false;"> bild 2 </a>
</li>
<li>
<a href = "Bilder/rose.jpg" onclick = "showpic (this); return false;"> pic drei </a>
</li>
<li>
<a href = "Bilder/bigben.jpg" onclick = "showpic (this); return false;"> bild 4 </a>
</li>
</ul>
<img id = "Platzhalter" Src = "Bilder /Platzhalter.gif" />
<p id = "Beschreibung"> Bild auswählen. </p>
</Body>
</Html>
Beachten:
Wir sollten darauf achten, Ereignisse zum Tag hinzuzufügen <a> </a>, um zu vermeiden, dass es Sprünge durchführt.
Lösung: Die Funktion gibt falsch zurück; Das Ereignis ist der Ansicht, dass der Link nicht angeklickt wurde.
Wenn der Wert von href JavaScript ist: void (0); Es kann auch nicht springen.