js html 图片切换,js动态切换图片的方法

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

js,css动态切换图片

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";

};

}

}

};

         

• 1
• 2
• 3

希望本文所述对大家的javascript程序设计有所帮助。