简单的点击切换图-CSDN博客

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">

*{
margin: 0;
padding: 0;
margin: 0 auto;
}

.cas{
margin-top: 100px;
width: 400px;
height: 430px;
background-color: skyblue;

}

#cssa{
width: 160px;
height: 360px;

/*margin-top: -100px;*/
background:url(images/2.jpg) top center;

}
.shubai{
cursor: pointer;
/*margin-top: 100px;*/
}
/*.shubai ul{
float: left;
list-style: none;
}*/
.shubai ul .casa1{
float: left;
width: 60px;
height: 20px;
}
.shubai ul .casa2{
float: left;
width: 60px;
height: 20px;
}
.shubai ul .casa3{
float: left;
width: 60px;
height: 20px;
}
.shubai ul .casa4{
float: left;
width: 60px;
height: 20px;
}
.shubai ul .casa5{
float: left;
width: 60px;
height: 20px;
}

.shubai li{
width: 40px;
height: 20px;
margin-top: 390px;

list-style: none;

/*line-height: 18px;*/
background-color: #3E3E3E;
float: left;
text-align: center;
color: #FFFFFF;
/*border-radius: 50%;*/
/*margin: 0 40px 0 60px;*/
/*cursor: pointer;*/
margin-left: 16px;
}

</style>
</head>
<body>

<div class = "shubai">
<ul class = "kaishi">
<li class = "casa1" id = "pxc1">picture1</li>
<li class = "casa2" id = "pxc2">picture2</li>
<li class = "casa3" id = "pxc3">picture3</li>
<li class = "casa4" id = "pxc4">picture4</li>
<li class = "casa5" id = "pxc5">picture5</li>
</ul>

</div>
<div id ="cssa"></div>
</div>

var pxc = document.getElementById("cssa");

var p1 = document.getElementById("pxc1");
var p2 = document.getElementById("pxc2");
var p3 = document.getElementById("pxc3");
var p4 = document.getElementById("pxc4");
var p5 = document.getElementById("pxc5");

pxc1.onclick = function(){
pxc.style.backgroundImage = "url(images/1.jpg)";

}
pxc2.onclick = function(){
pxc.style.backgroundImage = "url(images/2.jpg)";
}
pxc3.onclick = function(){
pxc.style.backgroundImage = "url(images/3.jpg)";
}
pxc4.onclick = function(){
pxc.style.backgroundImage = "url(images/4.jpg)";
}
pxc5.onclick = function(){
pxc.style.backgroundImage = "url(images/5.gif)";
}