* {
margin:0;
padding:0;
}
#wrap {
width:800px;
height:400px;
margin:0 auto;
border:5px solid #009999;
border-radius:10px;
margin-top:10px;
position:relative;
overflow:hidden;
}
input {
display:none;
}
label {
width:300px;
height:400px;
position:absolute;
top:0;
transition:0.5s;
}
label:nth-of-type(1) {
background:url(http://www.jq22.com/img/cs/300x500-1.png) no-repeat;
left:0;
}
label:nth-of-type(2) {
background:url(http://www.jq22.com/img/cs/300x500-2.png) no-repeat;
left:100px;
}
label:nth-of-type(3) {
background:url(http://www.jq22.com/img/cs/300x500-3.png) no-repeat;
left:200px;
}
label:nth-of-type(4) {
background:url(http://www.jq22.com/img/cs/300x500-4.png) no-repeat;
left:300px;
}
label:nth-of-type(5) {
background:url(http://www.jq22.com/img/cs/300x500-5.png) no-repeat;
left:400px;
}
label:nth-of-type(6) {
background:url(http://www.jq22.com/img/cs/300x500-6.png) no-repeat;
left:500px;
}
input:checked~label {
transform:translateX(200px);
-webkit-transform:translateX(200px);
}
</style>
</head>
<body>
<div id="wrap">
???<form action="">
???????<label for="input1"></label>
???????<input type="radio" id="input1" name="img">
???????<label for="input2"></label>
???????<input type="radio" id="input2" name="img">
???????<label for="input3"></label>
???????<input type="radio" id="input3" name="img">
???????<label for="input4"></label>
???????<input type="radio" id="input4" name="img">
???????<label for="input5"></label>
???????<input type="radio" id="input5" name="img">
???????<label for="input6"></label>
???????<input type="radio" id="input6" name="img">
???</form>
</div><script>
jquery手风琴制作
原文地址：http://www.cnblogs.com/zy66blogs/p/7481881.html