纯css3：radio+label实现轮播图
轮播图这东西，我相信只要是做前端的，肯定都做过，不过大部分应该都是用js来实现的，其实css3也是可以实现轮播图的，而且也可以加一些动画之类的，下边就分享下思路。声明，这里没有贬低js的意思，相反，js能做的，css基本做不到，css能做的，js基本能做到，这里纯粹就是为了分享css的一些运用。
css里有个可以绑定到<input>上的标签<label>，它的功能就是当你点击所绑定的这个<label>的时候，就可以选中相应的<input>，既然有了这个功能，那就有了控制轮播图的方法了。
HTML代码
<div id="wrap">
<!-- 用来控制对应的轮播块 -->
<input type="radio" name="banner" id="banner_bt1" checked />
<input type="radio" name="banner" id="banner_bt2" />
<input type="radio" name="banner" id="banner_bt3" />
<ul class="banner">
<li>
<h2>这是第一个标题</h2>
<p>这是第一段话...</p>
</li>
<li>
<h2>这是第二个标题</h2>
<p>这是第二段话...</p>
</li>
<li>
<h2>这是第三个标题</h2>
<p>这是第三段话...</p>
</li>
</ul>
<!-- 左右切换按钮 -->
<div class="bn_arrows">
<label for="banner_bt1"></label>
<label for="banner_bt2"></label>
<label for="banner_bt3"></label>
</div>
<!-- 索引按钮 -->
<div class="bn_index">
<label for="banner_bt1"></label>
<label for="banner_bt2"></label>
<label for="banner_bt3"></label>
</div>
</div>
CSS代码
* {
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
input{
display: none;
}
#wrap{
width: 1200px;
height: 375px;
margin: 100px auto;
background: red;
position: relative;
overflow: hidden;
}
.banner{
height: 100%;
position: relative;
top: 0;
left: 0;
white-space: nowrap;
font-size: 0;
transform: translateX(-100%);
transition: transform .3s;
}
.banner li{
display: inline-block;
width: 1200px;
height: 100%;
font-size: 20px;
color: #fff;
position: relative;
}
.banner li:nth-of-type(1){
background-color: #3c3c3c
}
.banner li:nth-of-type(2){
background-color: green
}
.banner li:nth-of-type(3){
background-color: blue
}
.bn_arrows label{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background: url(img/prev.png) no-repeat center rgba(255,255,255,.1);
background-size:auto 50%;
color: #fff;
transition: background-color .2s;
font-size: 16px;
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
display: none;
}
.bn_arrows label:hover{
background-color: rgba(255,255,255,.5);
}
.bn_index{
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
left: 0;
bottom: 10px;
z-index: 99;
}
.bn_index label{
display: inline-block;
width: 36px;
height: 6px;
background: rgba(255,255,255,.7);
margin: 0 10px;
cursor: pointer;
}
/* 绑定事件 */
/* 控制轮播块 */
input:nth-of-type(1):checked ~ .banner{
transform: translateX(0);
}
input:nth-of-type(2):checked ~ .banner{
transform: translateX(-100%);
}
input:nth-of-type(3):checked ~ .banner{
transform: translateX(-200%);
}
/* 控制索引按钮 */
input:nth-of-type(1):checked ~ .bn_index label:nth-of-type(1),
input:nth-of-type(2):checked ~ .bn_index label:nth-of-type(2),
input:nth-of-type(3):checked ~ .bn_index label:nth-of-type(3){
background: #fff;
}
/* 向右切换 */
input:nth-of-type(1):checked ~ .bn_arrows label:nth-of-type(2),
input:nth-of-type(2):checked ~ .bn_arrows label:nth-of-type(3){
display: block;
right: 10px;
background-image: url(img/next.png);
}
/* 向左切换 */
input:nth-of-type(2):checked ~ .bn_arrows label:nth-of-type(1),
input:nth-of-type(3):checked ~ .bn_arrows label:nth-of-type(2){
display: block;
left: 10px;
}
/* 绑定事件结束 */
/* 添加轮播块内容动画 */
.banner li h2,.banner li p{
position: absolute;
left: 100px;
opacity: 0;
}
.banner li h2{
top: 80px;
font-size: 20px;
transform: translateY(-30px);
transition: all .4s .3s;
}
.banner li p{
top: 130px;
font-size: 16px;
transform: translateX(-30px);
transition: all .4s .5s;
color: #ccc;
}
input:nth-of-type(1):checked ~ .banner li:nth-of-type(1) h2,
input:nth-of-type(1):checked ~ .banner li:nth-of-type(1) p,
input:nth-of-type(2):checked ~ .banner li:nth-of-type(2) h2,
input:nth-of-type(2):checked ~ .banner li:nth-of-type(2) p,
input:nth-of-type(3):checked ~ .banner li:nth-of-type(3) h2,
input:nth-of-type(3):checked ~ .banner li:nth-of-type(3) p{
opacity: 1;
}
input:nth-of-type(1):checked ~ .banner li:nth-of-type(1) h2,
input:nth-of-type(2):checked ~ .banner li:nth-of-type(2) h2,
input:nth-of-type(3):checked ~ .banner li:nth-of-type(3) h2{
transform: translateY(0);
}
input:nth-of-type(1):checked ~ .banner li:nth-of-type(1) p,
input:nth-of-type(2):checked ~ .banner li:nth-of-type(2) p,
input:nth-of-type(3):checked ~ .banner li:nth-of-type(3) p{
transform: translateX(0);
}
通过css可以看到，其实这个例子主要用到的就是<input type="radio">的:checked伪类选择器然后通错css3的:nth-of-type(n)节点选择器控制与之相对应的轮播、按钮，整个例子也没什么难度，也就不废话了。
网友评论