【如何用纯CSS制作轮播图,不能使用框架 _轮播 】 | IT修真院·坑乎
问题已收录 如何用纯CSS制作轮播图,不能使用框架
我也踩过这个坑( 2 )
已统计您的踩坑,无需重复点击
回答(2)
轮播
详细描述
截图
代码
编辑于2021-09-23
  • [北京|]JS-
    3

    这个任务用纯css做轮播主要是练习动画

    以下是代码

    <div class="banner">
    <div class="ba-box">
    <img  src="img/banner.png" >
    <img  src="img/banner2.jpg">
    <img  src="img/banner3.png">
    <img  src="img/banner.png" >

    </div>

    </div>

    //SASS
    .banner{
    width: 100%;
    overflow: hidden;
    .ba-box{
    width: calc(100% * 4);
    font-size: 0;
    animation:banner 6s ease 1s infinite ;
    -moz-animation:banner 6s ease  1s infinite ;
    -webkit-animation:banner 6s ease  1s infinite ;
    img{
    width: calc(100% / 4);
    }
    }
    @keyframes banner{
    0% {margin-left: 0;}
    10% {margin-left: 0;}
    33% {margin-left: -100%;}
    43% {margin-left: -100%;}
    66% {margin-left: -200%;}
    76% {margin-left: -200%;}
    100% {margin-left: -300%;}
    }

    还有一种不自动轮播点击轮播的效果主要练习Checked

    <div>
    <h3 class="pad-tb-10 txt-c font-22">优秀学员</h3>
    <div class="contain">
    <input type="radio" name="lunbo" value="0" id="a" checked hidden>
    <label class="label1 dsp-no-576" for="a">label>
    <input type="radio" name="lunbo" value="1" id="b" hidden>
    <label class="label2 dsp-no-576" for="b">label>
    <input type="radio" name="lunbo" value="2" id="c" hidden>
    <abel class="label3 dsp-no-576" for="c">label>
    <ul>
    </ul>
    //sass
    .contain ul {padding: 0;
    width: 300%;
    transition: all 0.5s;}
    .contain li {float: left;
    width: calc(100%/3)}
    .label1 {position: absolute;
    bottom: 10px;
    left: 48%;
    margin-left: -15px !important;}
    .label2 { position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -7px !important;}
    .label3 { position: absolute;
    bottom: 10px;
    left: 52%;
    margin-right: -15px !important; }
    #a:checked~ul {margin-left: 0;}
    #a:checked~.label1 {background-color:$maincolor;}
    #b:checked~ul {margin-left: -100%;}
    #b:checked~.label2 {background-color: $maincolor;}
    #c:checked~ul {margin-left: -200%}
    #c:checked~.label3 {background-color: $maincolor}


    编辑于2019-11-12
  • [深圳|结业弟子]JS-孟广旭
    0
    << span="">section class="slider-contaner">
       << span="">div class="banner-arrow">
           << span="">div class="banner-left">div>
           << span="">div class="banner-right">div>
       div>
       << span="">ul class="slider">
           << span="">li class="slider-item slider-item1">li>
           << span="">li class="slider-item slider-item2">li>
           << span="">li class="slider-item slider-item3">li>
           << span="">li class="slider-item slider-item4">li>
           << span="">li class="slider-item slider-item5">li>
       ul>
       << span="">div class="focus-container">
           << span="">ul class="floatfix">
               << span="">li><< span="">div class="focus-item focus-item1">div>li>
               << span="">li><< span="">div class="focus-item focus-item2">div>li>
               << span="">li><< span="">div class="focus-item focus-item3">div>li>
               << span="">li><< span="">div class="focus-item focus-item4">div>li>
               << span="">li><< span="">div class="focus-item focus-item5">div>li>
           ul>
       div>
    section>
    /*轮播图样式*/
    ul,li{
    list-style: none;
    padding: 0;
    }

    /*css public start*/
    .floatfix {
    *zoom: 1;
    }
    .floatfix:after {
    content: "";
    display: table;
    clear: both;
    }
    /*css public end*/

    /*slider start*/
    .slider-contaner{
    width:100%;
    position:relative;
    }
    .slider-item + .slider-item{
    opacity:0;
    }
    .slider-item{
    width:100%;
    position:absolute;
    animation-timing-function: linear;
    animation-name:fade;
    animation-iteration-count: infinite;
    background-size:100%;
    background-repeat: no-repeat;
    }
    .focus-container{
    position:absolute;
    z-index:7;
    margin:0 auto;
    left:0;
    right:0;
    }
    .focus-container li{
    width:.1rem;
    height:.1rem;
    border-radius:50%;
    float:left;
    margin: 0 .05rem;
    background:#fff;
    }
    .focus-item{
    width:100%;
    height:100%;
    border-radius:inherit;
    animation-timing-function: linear;
    animation-name:fade;
    animation-iteration-count: infinite;
    }
    .focus-item2,.focus-item3,.focus-item4,.focus-item5{
    opacity:0;
    }
    /*设置轮播焦点的位置*/
    .focus-container{
    bottom:2%;
    display: flex;
    justify-content: center;
    }
    /*设置当前图片焦点的颜色*/
    .focus-item{
    background:#51B1D9;
    }
    /*设置动画,请根据实际需要修改秒数*/
    .slider-item,.focus-item{
    animation-duration: 20s;
    }
    .slider-item1,.focus-item1{
    animation-delay: -1s;
    }
    .slider-item2,.focus-item2{
    animation-delay: 3s;
    }
    .slider-item3,.focus-item3{
    animation-delay: 7s;
    }
    .slider-item4,.focus-item4{
    animation-delay: 11s;
    }
    .slider-item5,.focus-item5{
    animation-delay: 15s;
    }
    @keyframes fade{
    0%{
    opacity:0;
    z-index:2;
    }
    5%{
    opacity:1;
    z-index: 1;
    }
    20%{
    opacity:1;
    z-index:1;
    }
    25%{
    opacity:0;
    z-index:0;
    }
    100%{
    opacity:0;
    z-index:0;
    }
    }
    /*设置背景,响应式请利用媒体查询根据断点修改路径*/
    .slider-item1{
    background-image:url(../image/beijing.png);
    }
    .slider-item2{
    background-image:url(../image/beijing.png);
    }
    .slider-item3{
    background-image:url(../image/beijing.png);
    }
    .slider-item4{
    background-image:url(../image/beijing.png);
    }
    .slider-item5{
    background-image:url(../image/beijing.png);
    }
    /*设置图片的高度,请根据具体需要修改百分比,响应式及时修改此值*/
    .slider,.slider-item{
    padding: 0;
    padding-bottom:30%;
    }

    .banner-arrow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 40%;
    }
    .banner-left {
    width: .2rem;
    height: .35rem;
    background-image: url(../image/beijing.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999;
    }
    .banner-right {
    width: .2rem;
    height: .35rem;
    background-image: url(../image/beijing.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999;
    }

    /*轮播图样式*/


    编辑于2018-08-13