css3代碼部分
<style>
*{
padding: 0;
margin: 0;
}
.box{
display: block;
width: 300px;
height: 70px;
}
ul{
display: block;
width: 300px;
height: 70px;
overflow: hidden;
}
li{
display: none;
width: 300px;
height: 70px;
}
li img{
display: block;
width: 300px;
height: 70px;
}
input{
display: none;
}
#button-1:checked~ul li:nth-child(1),
#button-2:checked~ul li:nth-child(2),
#button-3:checked~ul li:nth-child(3){
display: block;
}
label{
position: relative;
top: -20px;
left: 50px;
display: inline-block;
width:20px;
height: 20px;
background: red;
cursor: pointer;
}
</style>
html代碼部分
<div class="box">
<input type="radio" name="button" id="button-1" checked="checked">
<input type="radio" name="button" id="button-3">
<input type="radio" name="button" id="button-2">
<ul>
<li><img src="mc.png" alt=""></li>
<li><img src="lb.jpg" alt=""></li>
<li><img src="zgl.jpg" alt=""></li>
</ul>
<label for="button-1">1</label>
<label for="button-2">2</label>
<label for="button-3">3</label>
</div>
效果:
說明:點選1,2,3即可切換相應圖檔
設計原理通過點選1,2,3來控制 li 的顯示與否,進而達到效果