题目：请写一个简单的幻灯效果页面（如果不使用JS来完成，可以加分）
幻灯片效果其实就是实现图片的点击切换，一般情况下我们都会想到用js来做，但是用css方法要怎么实现呢
可以利用CSS3的单选按钮radio和label标签的for属性来实现图片的切换
label里面的for属性对应的是要显示的图片的id名字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
position: absolute;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -150px;
text-align: center;
}
img{
padding: 5px;
border: 1px solid #ddd;
display: none;
width: 300px;
height: 260px;
}
input{
position: absolute;
left: -99999px;
}
.banner{
display: flex;
}
label{
cursor: pointer;
flex-grow: 1;
border: 1px solid #ddd;
margin-top: 5px;
}
input:checked + img{
display: block;
}
</style>
<body>
<div class="wrap">
<div class="box">
<ul>
<li>
<input type="radio" name='img' id='img1' checked>
<img src="1.jpg" alt="">
</li>
<li>
<input type="radio" name='img' id='img2' >
<img src="2.jpg" alt="">
</li>
<li>
<input type="radio" name='img' id='img3' >
<img src="3.jpg" alt="">
</li>
</ul>
</div>
<div class="banner">
<label for="img1">第一张 </label>
<label for="img2">第二张</label>
<label for="img3">第三张</label>
</div>
</div>
</body>
</html>