js動態切換圖片的方法_javascript技巧

本文實例講述了js動態切換圖片的方法。分享給大家供大家參考。具體實作方法如下：

index.css檔案如下：

複製程式碼 程式碼如下:

* { 
    margin: 0px;padding: 0px; 
} 
 
body { 
    width: 632px; 
    /*background-color: blue;*/ 
    margin: 0 auto; 
} 
 
#imgsCom { 
    background-color: yellow; 
    /*相對定位，為了下層可以使用絕對定位時以本div的原點為原點*/ 
    position: relative; 
} 
 
#ulnav{ 
    list-style-type: none; 
    
    position: absolute; 
    /*使用以imgsCom為原點來絕對定位到右下角*/ 
    bottom: 0px; 
    right: 0px; 
} 
#ulnav li{ 
    list-style-type: none; 
    float: left; 
    background-color: black; 
    color: white; 
    margin-right: 5px; 
    width: 20px; 
    height: 20px; 
    line-height: 20px; 
    text-align: center; 
    cursor: pointer; 
}

index.html如下：

複製程式碼 程式碼如下:

 
 
 
     
     
     
     
 
        功能凝膠（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程式設計有所幫助。