【如何用纯CSS制作轮播图，不能使用框架 _轮播】

如何用纯CSS制作轮播图，不能使用框架

我也踩过这个坑( 2 )

已统计您的踩坑,无需重复点击

回答(2)

轮播

详细描述

截图

代码

css

编辑于2024-04-26

时间排序

热门排序

[北京|]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-孟广旭

<< 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

去第页