图片转换
<!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: 350px;
height: 430px;
}
#cssa{
width: 360px;
height: 360px;
/*margin-top: -100px;*/
background:url(images/1.jpg) top center;
}
.shubai{
cursor: pointer;
}
/*.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;
/*line-height: 18px;*/
background-color: #3E3E3E;
float: left;
text-align: center;
color: #FFFFFF;
/*border-radius: 50%;*/
margin: 0 2px;
/*cursor: pointer;*/
margin-left: 6px;
}
</style>
</head>
<body>
<div class = "cas">
<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>
<script type="text/javascript">
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(01.png)";
}
pxc2.onclick = function(){
pxc.style.backgroundImage = "url(02.png)";
}
pxc3.onclick = function(){
pxc.style.backgroundImage = "url(03.png)";
}
pxc4.onclick = function(){
pxc.style.backgroundImage = "url(04.png)";
}
pxc5.onclick = function(){
pxc.style.backgroundImage = "url(05.png)";
}
</script>
</body>
</html>
