이 기사에서는 JS에 의해 그림을 동적으로 전환하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
index.css 파일은 다음과 같습니다.
다음과 같이 코드를 복사하십시오.* {
여백 : 0px; 패딩 : 0px;
}
몸 {
너비 : 632px;
/*배경색 : 파란색;*/
여백 : 0 Auto;
}
#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 = "스타일 시트" />
<script type = "text/javaScript">
기능 젤 (ID) {
return document.getElementById (id);
}
함수 clearlibg () {
var mylis = gel ( "ulnav"). childnodes;
for (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");
// 모든 li 색상이 복원됩니다
clearlibg ();
// LI 배경 레이블의 색상을 교체하십시오
this.style.backgroundColor = "Silver";
};
}
}
};
</스크립트>
</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>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.