偏前端-纯css,手写轮播-（焦点切换和自动轮播只可选择一种，两者不可共存）

Lrn14616 2018-12-26 原文

现在我们一般都是在网上找个轮播插件，各种功能应有尽有，是吧！！~大家似乎已经生疏了手写是什么感觉。万一哪天想不起来，人家要手写，就尴尬了！~~跟我一起复习一下吧

不多说：效果图看一下：

高度不能是固定的哈，用padding 和 position 来解决，动画效果也可以改的哦！~

css:

  1 /*css reset start*/
  2             *{
  3             margin:0;
  4             padding:0;
  5             }
  6             ul,li{
  7             list-style: none;
  8             }
  9             /*css reset end*/
 10              
 11             /*css public start*/
 12             .floatfix {
 13             *zoom: 1;
 14             }
 15             .floatfix:after {
 16             content: "";
 17             display: table;
 18             clear: both;
 19             }
 20             /*css public end*/
 21              
 22             /*slider start*/
 23             .slider-contaner{
 24             width:100%;
 25             position:relative;
 26             }
 27             .slider-item + .slider-item{
 28             opacity:0;
 29             }
 30             .slider-item{
 31             width:100%;
 32             position:absolute;
 33             animation-timing-function: linear;
 34             animation-name:fade;
 35             animation-iteration-count: infinite;
 36             background-size:100%;
 37             }
 38             .focus-container{
 39             position:absolute;
 40             z-index:7;
 41             margin:0 auto;
 42             left:0;
 43             right:0;
 44             }
 45             .focus-container li{
 46             width:10px;
 47             height:10px;
 48             border-radius:50%;
 49             float:left;
 50             margin-right:10px;
 51             background:#fff;
 52             }
 53             .focus-item{
 54             width:100%;
 55             height:100%;
 56             border-radius:inherit;
 57             animation-timing-function: linear;
 58             animation-name:fade;
 59             animation-iteration-count: infinite;
 60             }
 61             .focus-item2,.focus-item3,.focus-item4,.focus-item5{
 62             opacity:0;
 63             }
 64             .focus-container ul{
 65             margin-left:46%;
 66             }
 67             /*设置轮播焦点的位置*/
 68             .focus-container{
 69             bottom:2%;
 70             }
 71             /*设置当前图片焦点的颜色*/
 72             .focus-item{
 73             background:#51B1D9;
 74             }
 75             /*设置动画，请根据实际需要修改秒数*/
 76             .slider-item,.focus-item{
 77             animation-duration: 20s;
 78             }
 79             .slider-item1,.focus-item1{
 80             animation-delay: -1s;
 81             }
 82             .slider-item2,.focus-item2{
 83             animation-delay: 3s;
 84             }
 85             .slider-item3,.focus-item3{
 86             animation-delay: 7s;
 87             }
 88             .slider-item4,.focus-item4{
 89             animation-delay: 11s;
 90             }
 91             .slider-item5,.focus-item5{
 92             animation-delay: 15s;
 93             }
 94             @keyframes fade{
 95             0%{
 96             opacity:0;
 97             z-index:2;
 98             }
 99             5%{
100             opacity:1;
101             z-index: 1;
102             }
103             20%{
104             opacity:1;
105             z-index:1;
106             }
107             25%{
108             opacity:0;
109             z-index:0;
110             }
111             100%{
112             opacity:0;
113             z-index:0;
114             }
115             }
116             /*设置背景，响应式请利用媒体查询根据断点修改路径*/
117             .slider-item1{
118             background-image:url(imgs/1.jpg);
119             }
120             .slider-item2{
121             background-image:url(imgs/2.jpg);
122             }
123             .slider-item3{
124             background-image:url(imgs/3.jpg);
125             }
126             .slider-item4{
127             background-image:url(imgs/4.jpg);
128             }
129             .slider-item5{
130             background-image:url(imgs/5.jpg);
131             }
132             /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
133             .slider,.slider-item{
134             padding-bottom:40%;
135             }

html:

 1 <section class="slider-contaner">
 2             <ul class="slider">
 3             <li class="slider-item slider-item1"></li>
 4             <li class="slider-item slider-item2"></li>
 5             <li class="slider-item slider-item3"></li>
 6             <li class="slider-item slider-item4"></li>
 7             <li class="slider-item slider-item5"></li>
 8             </ul>
 9             <div class="focus-container">
10                 <ul class="floatfix"> 
11                     <li><div class="focus-item focus-item1"></div></li>
12                     <li><div class="focus-item focus-item2"></div></li>
13                     <li><div class="focus-item focus-item3"></div></li>
14                     <li><div class="focus-item focus-item4"></div></li>
15                     <li><div class="focus-item focus-item5"></div></li>
16                 </ul>
17             </div>
18         </section>