Este artículo describe el método de cambiar dinámicamente imágenes por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
El archivo index.css es el siguiente:
Copie el código de la siguiente manera:* {
margen: 0px; relleno: 0px;
}
cuerpo {
Ancho: 632px;
/*Color de fondo: azul;*/
margen: 0 auto;
}
#imgscom {
Color de fondo: amarillo;
/*Posicionamiento relativo, para usar el posicionamiento absoluto en la capa inferior, use el origen de este div como el origen*/
Posición: relativo;
}
#ulnav {
Tipo de estilo de lista: Ninguno;
Posición: Absoluto;
/*Utilice IMGSCOM como el origen para ubicar absolutamente en la esquina inferior derecha*/
Abajo: 0px;
Derecha: 0px;
}
#ulnav li {
Tipo de estilo de lista: Ninguno;
flotante: izquierda;
Color de fondo: negro;
Color: blanco;
margen-derecha: 5px;
Ancho: 20px;
Altura: 20px;
Línea de altura: 20px;
Text-Align: Center;
cursor: puntero;
}
Index.html es el siguiente:
Copie el código de la siguiente manera: <! DocType Html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js, CSS cambia dinámicamente las imágenes </title>
<link href = "css /index.css" rel = "stylesheet" />
<script type = "text/javaScript">
function gel (id) {
return document.getElementById (id);
}
función clearLibg () {
var myLis = gel ("Ulnav"). Nodos de infancia;
para (var i = 0; i <mylis.length; i ++) {
if (mylis [i] .nodetype == 1) {
mylis [i] .style.backgroundcolor = "negro";
}
}
}
window.onload = function () {
// especificar un atributo para los tres li
var lis = gel ("Ulnav"). Nodos de niños;
para (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodeType == 1) {
lis [i] .Onclick = function () {
// Reemplazar la imagen
gel ("myimg"). setAttribute ("src", "imágenes/" + this.innerhtml + ".png");
// Todos los colores de Li restauran
ClearLibg ();
// Reemplazar el color de la etiqueta de fondo LI
this.style.backgroundcolor = "Silver";
};
}
}
};
</script>
</ablo>
<Body>
<div id = "imgscom">
<img src = "imágenes /1.png" id = "myimg" />
<ul id = "Ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.