В этой статье описывается метод динамического переключения изображений с помощью JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Файл index.css выглядит следующим образом:
Скопируйте код следующим образом:* {
Полевая: 0px; прокладка: 0px;
}
тело {
Ширина: 632px;
/*фоновый цвет: синий;*/
Поле: 0 Авто;
}
#imgscom {
фоновый цвет: желтый;
/*Относительное позиционирование, чтобы использовать абсолютное позиционирование в нижнем слое, используйте происхождение этого Div в качестве источника*/
позиция: относительно;
}
#Ulnav {
тип списка: нет;
позиция: абсолютно;
/*Используйте Imgscom в качестве начала, чтобы абсолютно определить в правом нижнем углу*/
Внизу: 0px;
Справа: 0px;
}
#ulnav li {
тип списка: нет;
Плавание: осталось;
фоновый цвет: черный;
Цвет: белый;
Право маржи: 5px;
Ширина: 20px;
Высота: 20px;
высота линии: 20px;
Текст-альбом: Центр;
курсор: указатель;
}
Index.html выглядит следующим образом:
Скопируйте код следующим образом: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS, CSS Динамически переключать изображения </title>
<link href = "css /index.css" rel = "stylesheet" />
<script type = "text/javascript">
Функциональный гель (id) {
return document.getElementbyId (id);
}
function clearlibg () {
var mylis = gel ("ulnav"). Childnodes;
для (var i = 0; i <mylis.length; i ++) {
if (mylis [i] .nodeType == 1) {
mylis [i] .style.backgroundcolor = "black";
}
}
}
window.onload = function () {
// указать атрибут для всех трех LI
var lis = gel ("ulnav"). Childnodes;
for (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
// заменить изображение
гель ("myimg"). setattribute ("src", "Images/" + this.innerhtml + ".png");
// все цвета
clearlibg ();
// заменить цвет фона фона Li
this.style.backgroundcolor = "silver";
};
}
}
};
</script>
</head>
<тело>
<div id = "imgscom">
<img src = "Images /1.png" id = "myimg" />
<ul id = "ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.