做這種輪播圖我們先要理解checked標(biāo)簽箕母，label標(biāo)簽储藐。
label:
標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
label 元素不會向用戶呈現(xiàn)任何特殊效果嘶是。不過钙勃，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本聂喇，就會觸發(fā)此控件辖源。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上同木。
標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同浮梢。checked:checked 屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的 input 元素跛十。
checked 屬性 與 或 配合使用彤路。
checked 屬性也可以在頁面加載后，通過 JavaScript 代碼進(jìn)行設(shè)置芥映。
首先我們先理清他的邏輯關(guān)系：
1：我們先建好div盒子用來放圖片洲尊；
2采用checked標(biāo)簽來做選擇事件。
html部分：
<div class="div1"></div>
<div class="div2></div>
這是盒子是用來放背景圖片的奈偏。
建好div盒子的時坞嘀，我們需要在CSS樣式中將第一個DIV盒子里的圖片顯現(xiàn)，第二個div盒子給凸顯出來惊来。
.div1{
background:url(1.jpg);
background-size:1226px 460px;
opacity:1;
.div2{
background:url(2.jpg);
background-size:1226px 460px;
opacity:0;
這樣我們上面整體的div盒子部分代碼完成了丽涩，這個時候，我們需要做點(diǎn)擊操作事件裁蚁，我采用input來做原點(diǎn)矢渊。
<input type="radio" name="x" id="a" checked>
<label for="a" class="i"></label>
<input type="radio" name="x" id="b" checked>
<label for="b" class="i"></label>
寫好原點(diǎn)的代碼后，我們此時就需要把原點(diǎn)和div盒子給結(jié)合起來枉证。
#a:checked~.div1{
opacity:1;
}
#b:checked~.div2{
opacity:1;
}
這是做輪播圖的核心代碼部分矮男，做好之后，還需要用到position做定位室谚，將原點(diǎn)的位置調(diào)整好毡鉴。
