其他的我就不多说直接上源码 附所需的图片
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<style>
#xingp{
width: 125px;
height: 25px;
}
.pxgz{
width: 20px;
height: 25px;
float: left;
}
</style>
<title></title>
</head>
<body>
<div id="xingp">
<div class="pxgz"><img src="xingdt/x2.png" id="x1" onmouseover="over(1)" onmouseout="out(1)" onclick="lick(1)"></div>
<div class="pxgz"><img src="xingdt/x2.png" id="x2" onmouseover="over(2)" onmouseout="out(2)" onclick="lick(2)"></div>
<div class="pxgz"><img src="xingdt/x2.png" id="x3" onmouseover="over(3)" onmouseout="out(3)" onclick="lick(3)"></div>
<div class="pxgz"><img src="xingdt/x2.png" id="x4" onmouseover="over(4)" onmouseout="out(4)" onclick="lick(4)"></div>
<div class="pxgz"><img src="xingdt/x2.png" id="x5" onmouseover="over(5)" onmouseout="out(5)" onclick="lick(5)"></div>
</div>
<script>
var zt=true;
function over(shu){
var img="xingdt/x1.png";
var img1="xingdt/x2.png";
if(shu==1){
if(!zt){
document.getElementById("x2").src=img1;
document.getElementById("x3").src=img1;
document.getElementById("x4").src=img1;
document.getElementById("x5").src=img1;
}
document.getElementById("x1").src=img;
zt=true;
}else if(shu==2){
if(!zt){
document.getElementById("x3").src=img1;
document.getElementById("x4").src=img1;
document.getElementById("x5").src=img1;
}
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
zt=true;
}else if(shu==3){
if(!zt){
document.getElementById("x4").src=img1;
document.getElementById("x5").src=img1;
}
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
zt=true;
}else if(shu==4){
if(!zt){
document.getElementById("x5").src=img1;
}
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
document.getElementById("x4").src=img;
zt=true;
}else if(shu==5){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
document.getElementById("x4").src=img;
document.getElementById("x5").src=img;
zt=true;
}
}
function out(shu){
var img="xingdt/x2.png";
if(shu==1&&zt){
document.getElementById("x1").src=img;
}else if(shu==2&&zt){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
}else if(shu==3&&zt){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
}else if(shu==4&&zt){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
document.getElementById("x4").src=img;
}else if(shu==5&&zt){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
document.getElementById("x4").src=img;
document.getElementById("x5").src=img;
}
}
function lick(shu){
var img="xingdt/x1.png";
if(shu==1){
document.getElementById("x1").src=img;
zt=false;
}else if(shu==2){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
zt=false;
}else if(shu==3){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
zt=false;
}else if(shu==4){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
document.getElementById("x4").src=img;
zt=false;
}else if(shu==5){
document.getElementById("x1").src=img;
document.getElementById("x2").src=img;
document.getElementById("x3").src=img;
document.getElementById("x4").src=img;
document.getElementById("x5").src=img;
zt=false;
}
}
</script>
</body>
</html>