Este artigo descreve o método de alternar dinamicamente as imagens por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
O arquivo index.css é o seguinte:
Copie o código da seguinte forma:* {
margem: 0px; preenchimento: 0px;
}
corpo {
Largura: 632px;
/*cor de fundo: azul;*/
margem: 0 automático;
}
#imgscom {
cor de fundo: amarelo;
/*Posicionamento relativo, para usar o posicionamento absoluto na camada inferior, use a origem desta div como a origem*/
Posição: relativa;
}
#ulnav {
Tipo no estilo de lista: nenhum;
Posição: Absoluto;
/*Use imgscom como origem para se localizar absolutamente no canto inferior direito*/
Inferior: 0px;
Direita: 0px;
}
#ulnav li {
Tipo no estilo de lista: nenhum;
flutuar: esquerda;
Background-Color: Black;
Cor: Branco;
Margem-direita: 5px;
Largura: 20px;
Altura: 20px;
altura de linha: 20px;
Alinhamento de texto: centro;
Cursor: Ponteiro;
}
Index.html é o seguinte:
Copie o código da seguinte forma: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS, CSS Switch Dynouse Pictures </ititle>
<link href = "css /index.css" rel = "Stylesheet" />
<script type = "text/javascript">
função gel (id) {
retornar document.getElementById (id);
}
função clearlibg () {
var mylis = gel ("ulnav"). Childnodes;
for (var i = 0; i <mylis.length; i ++) {
if (mylis [i] .NodEType == 1) {
mylis [i] .style.backgroundcolor = "preto";
}
}
}
window.onload = function () {
// Especifique um atributo para todos os três li
var lis = gel ("ulnav"). Childnodes;
for (var i = 0; i <lis.length; i ++) {
if (lis [i] .NodEType == 1) {
lis [i] .OnClick = function () {
// Substitua a imagem
gel ("myimg"). setattribute ("src", "imagens/" + this.innerhtml + ".png");
// Todas as cores da LI Restauração
clearlibg ();
// Substitua a cor da etiqueta de fundo li
this.style.backgroundcolor = "prata";
};
}
}
};
</script>
</head>
<Body>
<div id = "imgscom">
<img src = "imagens /1.png" id = "myimg" />
<ul id = "ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.