关于前端:手把手教你用纯css3实现轮播图效果

一、前言

css3 动画成果的弱小显而易见，自它呈现始终热度不减，它与 js 动画的优劣也始终成为前端界争执的话题，不可置疑的是 css3 动画的呈现在肯定水平上升高了动画成果的实现难度，利于前端的学习，其精简的代码量把咱们从烦人的 js 调试中解放出来，当然 css 的动画成果有其局限性，咱们不能只用 css3 模拟出全副的就是动画，另外就是浏览器的兼容性问题。咱们这次用 css3 实现一个轮播图成果，体验一下 css3 的弱小。

首先阐明咱们可次只实现了主动轮播，成果也是最常见的淡入淡出，并未实现点击轮换成果，至多在我目前程度来看，主动轮播与点击轮换两者纯 css3 只能选其一，如果能够同时实现两种成果的办法，请通知我。

二、布局

<section class="slider-contaner">
    <ul class="slider">
        <li class="slider-item slider-item1"></li>
        <li class="slider-item slider-item2"></li>
        <li class="slider-item slider-item3"></li>
        <li class="slider-item slider-item4"></li>
        <li class="slider-item slider-item5"></li>
    </ul>
</section>

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;
}
.slider,.slider-item{padding-bottom:40%;}
.slider-item{
      width:100%;
      position:absolute;
      background-size:100%;
}
.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);
}

三、设计动画

淡入淡出成果必定是应用 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{animation-delay: 11s;}
.slider-item5{animation-delay: 15s;}

这个时候咱们的轮播图能够动了

四、增加轮播焦点

增加轮播焦点当然不是为了点击，而是通知访问者这里有几张图片和目前图片的地位，至多以我集体而言，轮播焦点很重要，因为如果我不晓得轮播的图片有几张，我又没有方法点击，我就会十分不安，感觉本人没有看到整个网页的全貌。所以咱们还是增加一下轮播焦点。首先十分明确的这个依然能够应用下面的动画，另外布局必定应用 position：absolute，另外很显著焦点咱们必须写两次，一次是以后图片的款式，一次是非以后图片的款式

<div class="focus-container">
<ul class="floatfix"> 
<li><div class="focus-item focus-item1"></div></li>
<li><div class="focus-item focus-item2"></div></li>
<li><div class="focus-item focus-item3"></div></li>
<li><div class="focus-item focus-item4"></div></li>
<li><div class="focus-item focus-item5"></div></li>
</ul>
</div>

.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 代码分区，另外就是尽量减少前期批改须要批改的中央，这个次要是代码重构的问题，这个问题我曾经在编写代码的时候思考到了，所以次要工作就是增加正文和通知维护者代码最常批改的中央，咱们遵循最常批改的代码放到最初的准则。
咱们来剖析一下咱们的代码如果给他人用可能须要批改的中央，首先必定是图片门路，所以咱们把这个款式放在最初，而后是图片高度，轮播焦点的色彩，动画工夫的设置（这里还波及图片个数），轮播焦点的地位，当然轮播焦点大小也可能批改。重构后代码如下：

<section class="slider-contaner">
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
<li class="slider-item slider-item4"></li>
<li class="slider-item slider-item5"></li>
</ul>
<div class="focus-container">
<ul class="floatfix"> 
<li><div class="focus-item focus-item1"></div></li>
<li><div class="focus-item focus-item2"></div></li>
<li><div class="focus-item focus-item3"></div></li>
<li><div class="focus-item focus-item4"></div></li>
<li><div class="focus-item focus-item5"></div></li>
</ul>
</div>
</section>

/*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%;}

六、最初扯两句

这种 css3 实现的轮播图，毛病也是显而易见，点击轮换和主动轮换两者只能选其一，不过主动轮换能够用在手机端，这是一个不错的抉择，另外，当初的网站大都是通栏设计，网页文字很少，尤其是网站首页更是如此，有时候比的不是网站设计的优劣，反而是谁选的图片难看，谁就有可能受到青眼，这种状况咱们其实能够思考将轮播图变为背景的轮换，这时候轮播焦点也就能够不应用了，置信你的博客首页或者产品首页应用背景轮换，成果会十分不错的