Home > Developer > Web Develop
* {
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>
<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 accordion Making
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
