快捷導(dǎo)航

js動(dòng)態(tài)切換圖片的方法

更新時(shí)間：2015年01月20日 09:31:22 投稿：shichen2014

這篇文章主要介紹了js動(dòng)態(tài)切換圖片的方法,包含完整的css文件與js文件實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js動(dòng)態(tài)切換圖片的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

index.css文件如下：

* {  

    margin: 0px;padding: 0px;  

}  

body {  

    width: 632px;  

    /*background-color: blue;*/  

    margin: 0 auto;  

}  

#imgsCom {  

    background-color: yellow;  

    /*相對(duì)定位，為了下層可以使用絕對(duì)定位時(shí)以本div的原點(diǎn)為原點(diǎn)*/  

    position: relative;  

}  

#ulnav{  

    list-style-type: none;  

    position: absolute;  

    /*使用以imgsCom為原點(diǎn)來絕對(duì)定位到右下角*/  

    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如下：

復(fù)制代碼代碼如下:

<!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動(dòng)態(tài)切換圖片</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() {  

            //給三個(gè)li都指定一個(gè)屬性  

            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顏色復(fù)原  

                        clearLiBg();  

                        //更換LI背景標(biāo)簽顏色  

                        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>