Dieser Artikel beschreibt die Methode, Bilder dynamisch durch JS zu schalten. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Datei index.css ist wie folgt:
Kopieren Sie den Code wie folgt:* {
Rand: 0px; Polsterung: 0px;
}
Körper {
Breite: 632px;
/*Hintergrundfarbe: blau;*/
Rand: 0 Auto;
}
#imgscom {
Hintergrundfarbe: Gelb;
/*Relative Positionierung, um die absolute Positionierung in der unteren Schicht zu verwenden, verwenden Sie den Ursprung dieses DIV als Ursprung*/
Position: Relativ;
}
#ulnav {
Typ-Typ-Typ: Keine;
Position: absolut;
/*Verwenden Sie IMGSCOM als Ursprung, um die untere rechte Ecke absolut zu lokalisieren*/
unten: 0px;
Rechts: 0px;
}
#ulnav li {
Typ-Typ-Typ: Keine;
float: links;
Hintergrundfarbe: Schwarz;
Farbe: weiß;
Rand-Rechts: 5px;
Breite: 20px;
Höhe: 20px;
Zeilenhöhe: 20px;
Text-Align: Mitte;
Cursor: Zeiger;
}
Index.html ist wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> JS, CSS wechseln dynamisch Bilder </title>
<link href = "css /index.css" rel = "stylesheet" />
<script type = "text/javaScript">
Funktion Gel (id) {
return document.getElementById (id);
}
Funktion clearlibg () {
var Mylis = Gel ("ulnav"). Childnodes;
für (var i = 0; i <mylis.length; i ++) {
if (mylis [i] .nodetype == 1) {
Mylis [i] .style.backgroundcolor = "schwarz";
}
}
}
window.onload = function () {
// Geben Sie ein Attribut für alle drei Li an
var lis = gel ("ulnav"). Childnodes;
für (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodetype == 1) {
lis [i] .onclick = function () {
// das Bild ersetzen
Gel ("myimg"). setAttribute ("src", "Images/" + this.innerhtml + ".png");
// Alle Li -Farben stellen wieder her
clearlibg ();
// Ersetzen Sie die Farbe des LI -Hintergrundbezeichnungen
this.style.backgroundcolor = "Silver";
};
}
}
};
</script>
</head>
<body>
<div id = "imgscom">
<img src = "bilder /1.png" id = "myimg" />
<ul id = "ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.