* { 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); }
使用input的label特性制作的手风琴式相册,简单易懂