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

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

不多说：效果图看一下：

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

css:

 /*css reset start*/
             *{
             margin:;
             padding:;
             }
             ul,li{
             list-style: none;
             }
             /*css reset end*/

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

             /*slider start*/
             .slider-contaner{
             width:100%;
             position:relative;
             }
             .slider-item + .slider-item{
             opacity:;
             }
             .slider-item{
             width:100%;
             position:absolute;
             animation-timing-function: linear;
             animation-name:fade;
             animation-iteration-count: infinite;
             background-size:100%;
             }
             .focus-container{
             position:absolute;
             z-index:;
             margin:0 auto;
             left:;
             right:;
             }
             .focus-container li{
             width:10px;
             height:10px;
             border-radius:50%;
             float:left;
             margin-right:10px;
             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:;
             }
             .focus-container ul{
             margin-left:46%;
             }
             /*设置轮播焦点的位置*/
             .focus-container{
             bottom:2%;
             }
             /*设置当前图片焦点的颜色*/
             .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:;
             z-index:;
             }
             5%{
             opacity:;
             z-index:;
             }
             20%{
             opacity:;
             z-index:;
             }
             25%{
             opacity:;
             z-index:;
             }
             100%{
             opacity:;
             z-index:;
             }
             }
             /*设置背景，响应式请利用媒体查询根据断点修改路径*/
             .slider-item1{
             background-image:url(imgs/1.jpg);
             }
             .slider-item2{
             background-image:url(imgs/2.jpg);
             }
             .slider-item3{
             background-image:url(imgs/3.jpg);
             }
             .slider-item4{
             background-image:url(imgs/4.jpg);
             }
             .slider-item5{
             background-image:url(imgs/5.jpg);
             }
             /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
             .slider,.slider-item{
             padding-bottom:40%;
             }

html:

 <section class="slider-contaner">
             <ul class="slider">
             <li class="slider-item slider-item1"></li>
             <li class="slider-item slider-item2"></li>
             <li class="slider-item slider-item3"></li>
             <li class="slider-item slider-item4"></li>
             <li class="slider-item slider-item5"></li>
             </ul>
             <div class="focus-container">
                 <ul class="floatfix">
                     <li><div class="focus-item focus-item1"></div></li>
                     <li><div class="focus-item focus-item2"></div></li>
                     <li><div class="focus-item focus-item3"></div></li>
                     <li><div class="focus-item focus-item4"></div></li>
                     <li><div class="focus-item focus-item5"></div></li>
                 </ul>
             </div>
         </section>

下载个demo看看吧