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 的显示与否，从而达到效果