Cet article décrit la méthode de commutation dynamiquement des images par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Le fichier index.css est le suivant:
Copiez le code comme suit: * {
marge: 0px; rembourrage: 0px;
}
corps {
Largeur: 632px;
/ * Color d'arrière-plan: bleu; * /
marge: 0 auto;
}
#imgscom {
Color d'arrière-plan: jaune;
/ * Positionnement relatif, afin d'utiliser le positionnement absolu dans la couche inférieure, utilise l'origine de cette div comme origine * /
Position: relative;
}
#ulnav {
Type de style liste: aucun;
Position: absolue;
/ * Utilisez IMGSCOM comme origine pour localiser absolument dans le coin inférieur droit * /
En bas: 0px;
Droite: 0px;
}
#ulnav li {
Type de style liste: aucun;
flottant: à gauche;
Color en arrière-plan: noir;
Couleur: blanc;
marge droite: 5px;
Largeur: 20px;
hauteur: 20px;
hauteur de ligne: 20px;
Texte-aligne: Centre;
curseur: pointeur;
}
Index.html est le suivant:
Copiez le code comme suit: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS, CSS Changement de photos </TITAL>
<link href = "css / index.css" rel = "Stylesheet" />
<script type = "text / javascript">
fonction gel (id) {
return document.getElementById (id);
}
fonction clearlibg () {
var mylis = gel ("ulnav"). ChildNodes;
pour (var i = 0; i <mylis.length; i ++) {
if (mylis [i] .NodeType == 1) {
mylis [i] .style.backgroundcolor = "noir";
}
}
}
window.onload = function () {
// Spécifiez un attribut pour les trois Li
var lis = gel ("ulnav"). ChildNodes;
pour (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
// remplace l'image
gel ("myimg"). setAttribute ("src", "images /" + this.innerhtml + ".png");
// Toutes les couleurs li restaurent
clearlibg ();
// remplace la couleur de l'étiquette d'arrière-plan Li
this.style.backgroundColor = "Silver";
};
}
}
};
</cript>
</ head>
<body>
<div id = "imgscom">
<img src = "images / 1.png" id = "myimg" />
<ul id = "ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.