使用CSS3中的input标签与lable标签组合实现banner图的切换

在做网页时，我们经常可以碰到banner图的切换。对于那些JS薄弱的同学来说，这就很尴尬了。今天，我来告诉大家如何使用CSS做出banner图切换的效果。

这里，用到了lable标签与input的组合，首先先来了解下lable标签

标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

input标签有个checked属性，当lable属性绑定后，选中lable即可选中input标签

首先，先做一个基本的HTML布局

• 
• 
• 
• 
• 

for绑定input的ID实现lable与input的绑定

加以修饰

label{ cursor: pointer; display: inline-block; opacity: 0.3; height: 70px; width: 70px; margin-top: 100px; background-color: red;}label:hover{opacity: 1;}input{display:none;}ul{ list-style: none; padding: 0px; height: 365px; overflow: hidden; margin-left: 480px; position: relative;}

.set_page1:checked ~.photo ul li:nth-child(1){ position: absolute; top: 0px; z-index: 25;}.set_page2:checked ~.photo ul li:nth-child(2){ position: absolute; top: 0; z-index: 22;}.set_page3:checked ~.photo ul li:nth-child(3){ position: absolute; top: 0; z-index: 23;}.set_page4:checked ~.photo ul li:nth-child(4){ position: absolute; top: 0; z-index: 24;}.set_page5:checked ~.photo ul li:nth-child(5){ position: absolute; top: 0;}

隐藏input，因为这里我们只需用到input的checked属性。选中lable时，与之绑定的Input也会处于checked状态，这样，我们只需利用checked属性加上伪类选择器。就可以实现banner图的切换。由于定位的原因，会使后面的图盖住前面的图，所以需要设置z-index使图片上去.

对lable稍加修饰，就可以拿去网页上用了，不用复杂的JS代码啦（ps：对lable修饰时，需要设置display:block属性）。