纯css3:radio+label实现轮播图

纯css3:radio+label实现轮播图

预览地址:纯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)节点选择器控制与之相对应的轮播、按钮,整个例子也没什么难度,也就不废话了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.背景介绍 轮播图,是由网页banner进化而来,通常放在屏幕最显眼的位置,以大图显示。随着互联网的发展...
    xiaoyudesu阅读 3,389评论 0 16
  • 1.背景介绍 轮播图,是由网页banner进化而来,通常放在屏幕最显眼的位置,以大图显示。随着互联网的发展,网页中...
    xiaoyudesu阅读 2,011评论 0 8
  • 首先先看demo吧,点击查看demo 一、随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与j...
    忽如寄阅读 51,370评论 17 55
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,658评论 0 7
  • 今天看完了《世界上的另一个我·欧洲季》的第三集!纪录片导演杨帆骑着摩托车在世界上寻找与他同年月日出生(1990年1...
    wblearn阅读 538评论 2 15