js動態切換圖片的方法

2019-11-20 13:21:42

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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如下：

復制代碼代碼如下:

<!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) {  
            return document.getElementById(id);  
        }  
  
        function  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 () {  
                        //更換圖片  
                        gel("myimg").setAttribute("src", "images/" + this.innerHTML + ".png");  
                        //所有LI顏色復原  
                        clearLiBg();  
                        //更換LI背景標簽顏色  
                        this.style.backgroundColor = "silver";  
                    };  
                }  
            }  
        };  
    </script>  
</head>  
<body>  
    <div id="imgsCom" style="width: 632px; height: 412px;">  
        <img src="images/1.png" id="myimg" style="width: 632px; height: 412px; " />  
        <ul id="ulnav">  
            <li>1</li>  
            <li>2</li>  
            <li>3</li>  
        </ul>  
    </div>  
</body>  
</html>