现在我们一般都是在网上找个轮播插件，各种功能应有尽有，是吧！！~大家似乎已经生疏了手写是什么感觉。万一哪天想不起来，人家要手写，就尴尬了！~~跟我一起复习一下吧
不多说：效果图看一下：
高度不能是固定的哈，用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,手写轮播-（焦点切换 和 自动轮播 只可选择一种，两者不可共存）
原文地址：https://www.cnblogs.com/Lrn14616/p/10177364.html