现在我们一般都是在网上找个轮播插件，各种功能应有尽有，是吧！！~大家似乎已经生疏了手写是什么感觉。万一哪天想不起来，人家要手写，就尴尬了！~~跟我一起复习一下吧
不多说：效果图看一下：
高度不能是固定的哈，用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看看吧
原文地址：https://www.cnblogs.com/Lrn14616/p/10177364.html
时间： 2024-10-22 14:14:59