手把手教你用纯css3实现轮播图效果

2401_84419493

于 2024-04-27 13:06:52 发布

阅读量921

点赞数 13

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/2401_84419493/article/details/138247327

版权

.focus-container{
position:absolute;
bottom:2%;
z-index:7;
margin:0 auto;
left:0;
right:0;
}
.focus-container ul{
margin-left:46%;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
background:#51B1D9;
border-radius:inherit;
animation-duration: 20s;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item1{
animation-delay: -1s;
}
.focus-item2{
animation-delay: 3s;
}
.focus-item3{
animation-delay: 7s;
}
.focus-item4{
animation-delay: 11s;
}
.focus-item5{
animation-delay: 15s;
}

五、梳理代码

如果你维护过别人的代码你就会知道，代码梳理对于后期维护的重要性了，没有经过梳理的css代码，随心所欲写到哪里就是哪里，对于后期维护来说简直就是一场灾难，css代码梳理个人认为首先必须添加必要的注释，将css代码分区，另外就是尽量减少后期修改需要修改的地方，这个主要是代码重构的问题，这个问题我已经在编写代码的时候考虑到了，所以主要任务就是添加注释和告诉维护者代码最常修改的地方，我们遵循最常修改的代码放到最后的原则。
我们来分析一下我们的代码如果给别人用可能需要修改的地方，首先肯定是图片路径，所以我们把这个样式放在最后，然后是图片高度，轮播焦点的颜色，动画时间的设置（这里还涉及图片个数），轮播焦点的位置，当然轮播焦点大小也可能修改。重构后代码如下：

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

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

/slider start/
.slider-contaner{
width:100%;
position:relative;
}
.slider-item + .slider-item{
opacity:0;
}
.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:7;
margin:0 auto;
left:0;
right:0;
}
.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:0;
}
.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:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
/设置背景，响应式请利用媒体查询根据断点修改路径/
.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%;
}