この記事では、JSによる動的に写真を切り替える方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
index.cssファイルは次のとおりです。
次のようにコードをコピーします：* {
マージン：0px;パディング：0px;
}
体 {
幅：632px;
/*background-color：blue;*/
マージン：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">
<head>
<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">
function gel（id）{
document.getElementByID（ID）を返します。
}
関数clearlibg（）{
var mylis = gel（ "ulnav"）。チャイルドノード;
for（var i = 0; i <mylis.length; i ++）{
if（mylis [i] .nodetype == 1）{
mylis [i] .style.backgroundcolor = "black";
}
}
}
window.onload = function（）{
// 3つのLiすべての属性を指定します
var lis = gel（ "ulnav"）。チャイルド;
for（var i = 0; i <lis.length; i ++）{
if（lis [i] .nodetype == 1）{
lis [i] .onclick = function（）{
//写真を交換します
gel（ "myimg"）。setAttribute（ "src"、 "images/" + this.innerhtml + ".png"）;
//すべてのLi色が復元されます
clearlibg（）;
// LIバックグラウンドラベルの色を交換します
this.style.backgroundColor = "Silver";
};
}
}
};
</script>
</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プログラミングに役立つことを願っています。