先上代码：
HTML代码
<body>
<input type="radio" name="xxx" id="r1" checked>
<input type="radio" name="xxx" id="r2">
<input type="radio" name="xxx" id="r3">
<div class="window">
<div class="pics">
<div class="pic">
<img src="http://upload-images.jianshu.io/upload_images/1973393-0efd699f46ff0393.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>
<div class="pic">
<img src="http://upload-images.jianshu.io/upload_images/1973393-770d4570f227b209.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>
<div class="pic">
<img src="http://upload-images.jianshu.io/upload_images/1973393-dc6f6e51e1bc867e.gif?imageMogr2/auto-orient/strip" alt="">
</div>
</div>
</div>
<div class="label">
<label for="r1">1</label>
<label for="r2">2</label>
<label for="r3">3</label>
</div>
</body>
CSS代码：
div.window {
width:200px;
height:200px;
background:#ddd;
overflow:hidden;
}
.pics {
width:600px;
display:flex;
}
.pic {
width:200px;
height:200px;
}
.pic:nth-child(1){
background:purple;
}
.pic:nth-child(2) {
background:pink;
}
.pic:nth-child(3) {
background:#999;
}
[name=xxx] {
display:none;
}
[name=xxx]:nth-child(1):checked ~ .window .pics {
transform:translateX(0);
}
[name=xxx]:nth-child(2):checked ~ .window .pics {
transform:translateX(-200px);
}
[name=xxx]:nth-child(3):checked ~ .window .pics {
transform:translateX(-400px);
}
div.label {
width:200px;
height:100px;
margin-top:20px;
text-align:center;
}
label {
border:1px solid #ccc;
text-align:center;
padding:5px 12px;
border-radius:20px;
}
.pics {
transform:all 1s;
}
效果
《老九门番外篇系列(周年纪念版 )》国产剧高清在线免费观看：https://www.jgz518.com/xingkong/163060.html