js_javascriptスキルで画像を動的に切り替える方法

この記事の例では、js で画像を動的に切り替える方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

index.css ファイルは次のとおりです:

コードをコピー コードは次のとおりです:

* {
マージン: 0px;パディング: 0px; }

ボディ {
幅: 632px; /*背景色: 青;*/
マージン: 0 自動
}

#imgsCom {
背景色: 黄色
/*相対配置。下位レイヤーに絶対配置を使用するには、この div の原点を原点として使用します*/
位置: 相対的; }

#ulnav{
リストスタイルタイプ: なし

位置: 絶対; /*imgsCom を原点として使用し、右下隅を絶対的に配置します*/
下: 0px; 右: 0px; }
#ulnav li{
リストスタイルタイプ: なし
フロート: 左
背景色: 黒
色：白
マージン右: 5px;
幅: 20px; 高さ: 20px; 行の高さ: 20px; テキストの配置: 中央;
カーソル: ポインタ
}


index.html は次のとおりです:




コードをコピー

コードは次のとおりです:

 
 
 
     
     
     
    <スクリプトタイプ="text/javascript"> 
 
        関数 gel(id) {
            document.getElementById(id) を返します。 
        }
 
        関数 clearLiBg() {
            var mylis = gel("ulnav").childNodes; 
            for (var i = 0; i                 if (mylis[i].nodeType == 1) {
                    mylis[i].style.backgroundColor = "黒"; 
                }
            }
        }
       
        window.onload = function() {
            //给三个li都指定一属性
            var lis = gel("ulnav").childNodes; 
            for (var i = 0; i                 if (lis[i].nodeType == 1) {
                    lis[i].onclick = function () {
                        //画像を更新
                        gel("myimg").setAttribute("src", "images/" this.innerHTML ".png"); 
                        //すべてLI颜色复原
                        クリアLiBg(); 
                        //更换LI背景标签颜色
                        this.style.backgroundColor = "シルバー"; 
                    }; 
                }
            }
        }; 
     
 
 
   

 
         
       

 
           
• 1
 
           
• 2
 
           
• 3
 
       

 
   

 
 

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。