題目：請寫一個簡單的幻燈效果頁面（如果不使用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>