現在我們一般都是在網上找個輪播插件，各種功能應有盡有，是吧！！~大家似乎已經生疏了手寫是什麽感覺。萬一哪天想不起來，人家要手寫，就尷尬了！~~跟我一起復習一下吧

不多說：效果圖看一下：

高度不能是固定的哈，用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>

下載個demo看看吧

偏前端-純css,手寫輪播-（焦點切換 和 自動輪播 只可選擇一種，兩者不可共存）