【如何css手写轮播+点击的轮播图 _轮播】

如何css手写轮播+点击的轮播图
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
轮播
详细描述
截图
代码
  <section class="header-slider-contaner">
    <ul class="header-slider">
      <li class="header-slider-item slider-item1"></li>
      <li class="header-slider-item slider-item2"></li>
      <li class="header-slider-item slider-item3"></li>
      <li class="header-slider-item slider-item4"></li>
      <li class="header-slider-item slider-item5"></li>
    </ul>
    <div class="header-focus-container">
      <ul class="clearfix">
        <li>
          <div class="header-focus-item focus-item1"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item2"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item3"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item4"></div>
        </li>
        <li>
          <div class="header-focus-item focus-item5"></div>
        </li>
      </ul>
    </div>
  </section>




  ul,li{
  list-style: none;
  }
  /*css reset end*/
  
  /*css public start*/
  .clearfix {
    &:after {
      content: "";
      display: table;
      clear: both;
    }
}
  /*css public end*/
  
  /*slider start*/
  .header-slider-contaner{
  width:100%;
  position:relative;
  }
  .header-slider-item {
  opacity:0;
  }
  .header-slider-item{
  width:100%;
  position:absolute;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  background-size:100%;
  }
  .header-focus-container{
  position:absolute;
  z-index:7;
  margin:0 auto;
  width: 1rem;
  left:0;
  right:0;
  }
  .header-focus-container li{
  width:0.1rem;
  height:0.1rem;
  border-radius:50%;
  float:left;
  margin-right:0.05rem;
  margin-left: 0.05rem;
  background:#fff;
  }
  .header-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;
  }

  /*设置轮播焦点的位置*/
  .header-focus-container{
  bottom:2%;
  }
  /*设置当前图片焦点的颜色*/
  .header-focus-item{
  background:#51B1D9;
  }
  /*设置动画，请根据实际需要修改秒数*/
  .header-slider-item,.header-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(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item2{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item3{
  background-image:url(../start-a-project/sss/CSS/task8/picture-2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item4{
  background-image:url(../start-a-project/sss/CSS/task8/task8-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  .slider-item5{
  background-image:url(../start-a-project/sss/CSS/task8/picture-1.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  }
  /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
  .header-slider,.header-slider-item{
  padding-bottom:31%;
  }
编辑于2025-04-03