css轮播图_⼿把⼿教你⽤纯css3实现轮播图效果作者：忽如寄
js控制css3动画触发⼀、随便说⼏句####
css3动画效果的强⼤不⾔⽽喻，⾃它出现⼀直热度不减，它与js动画的优劣也⼀直成为前端界争论的话题，不可置疑的是css3动画的出现
在⼀定程度上降低了动画效果的实现难度，利于前端的学习，其精简的代码量把我们从烦⼈的js调试中解放出来，当然css的动画效果有其
局限性，我们不能只⽤css3模拟出全部的就是动画，另外就是浏览器的兼容性问题。我们这次⽤css3实现⼀个轮播图效果，体验⼀下css3
的强⼤。
⾸先说明我们可次只实现了⾃动轮播，效果也是最常见的淡⼊淡出，并未实现点击轮换效果，⾄少在我⽬前⽔平来看，⾃动轮播与点击轮换
两者纯css3只能选其⼀，如果可以同时实现两种效果的⽅法，请告诉我。
⼆、布局###
html代码没有什么可说的，样式的话⾸先必定slider的⼤盒⼦必定是相对定位，另外我们采⽤在li标签中添加background-image，因为这
样才有可能⽤纯的css实现响应式，另外背景图为了在响应式中看清全貌，必然使⽤background-size:100%，另外就是⾼度问题了，显然
slider-container必需是和li的⾼度⼀致，因为响应式中必然这个⾼度不能固定死，所以使⽤height属性显然不⾏，padding属性可以解决这
个问题，⼀是background-image可以显⽰在padding中，⼆是padding中以%为单位是以⽗元素宽度为基准的。
*{ margin:0; padding:0;}ul,li{ list-style: none;}.floatfix { *zoom: 1;}.floatfix:after { content: ""; display: table; clear: both;}.slider-contaner{ width:100%; position:relative 三、设计动画####
淡⼊淡出效果肯定是使⽤opacity，⾸先整体来看所有图⽚的淡⼊淡出都是同⼀个动画，只是时间不⼀样⽽已，这肯定是利⽤animation-
delay来控制，动画⽆限轮换肯定使⽤animation-iteration-count: infinite，我们这次5张图⽚，整个动画分为图⽚停留和淡⼊淡出两个效
果，⽤下图表⽰，箭头表⽰淡⼊淡出过程。
因为css3中没有⼀个属性是规定两次动画播放的时间间隔，所以我们必须把其他图⽚淡⼊淡出时该图⽚的效果写进动画⾥，显然这时候是opacity:0；
我们为了写动画的⽅便，动画使⽤线性函数，也就是animation-timing-function:linear；整个过程使⽤20s，⼀次停留使⽤3秒，⼀次淡⼊
淡出使⽤1s，折合成百分⽐也就是15%和5%；
@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;}}
接下来就是为每张图⽚添加animation-delay了，因为第⼀张图⽚必须显⽰在最前，所以其他通过相邻兄弟选择器使⽤opacity:0，第⼀张图⽚开始不需要淡⼊淡出，直接跳⾄停留也就是5%，所以animation-delay为-1s，第⼆章图⽚和第⼀张相隔20%，也就是4s，animation-delay为3s，以此类推
.slider-item + .slider-item{ opacity:0;}.slider-item1{ animation-delay: -1s;}.slider-item2{ animation-delay: 3s;}.slider-item3{ animation-delay: 7s;}.slider-item4这个时候我们的轮播图可以动了
四、添加轮播焦点####
添加轮播焦点当然不是为了点击，⽽是告诉访问者这⾥有⼏张图⽚和⽬前图⽚的位置，⾄少以我个⼈⽽⾔，轮播焦点很重要，因为如果我不知道轮播的图⽚有⼏张，我⼜没有办法点击，我就会⾮常不安，感觉⾃⼰没有看到整个⽹页的全貌。所以我们还是添加⼀下轮播焦点。⾸先⾮常明确的这个仍然可以使⽤上⾯的动画，另外布局肯定使⽤position：absolute，另外很明显焦点我们必须写两次，⼀次是当前图⽚的样式，⼀次是⾮当前图⽚的样式
五、梳理代码####
如果你维护过别⼈的代码你就会知道，代码梳理对于后期维护的重要性了，没有经过梳理的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;clea 六、最后扯两句####
这种css3实现的轮播图，缺点也是不⾔⽽喻，点击轮换和⾃动轮换两者只能选其⼀，不过⾃动轮换可以⽤在⼿机端，这是⼀个不错的选
择，另外，现在的⽹站⼤都是通栏设计，⽹页⽂字很少，尤其是⽹站⾸页更是如此，有时候⽐的不是⽹站设计的优劣，反⽽是谁选的图⽚好看，谁就有可能受到青睐，这种情况我们其实可以考虑将轮播图变为背景的轮换，这时候轮播焦点也就可以不使⽤了，相信你的博客⾸页或
者产品⾸页使⽤背景轮换，效果会⾮常不错的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。