纯css3实现图片自动切换

实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。

大致思路是这样的：

1、将图片设置为li的背景图片；

2、规定一个@keyframes的规则使得图片按照这个规则进行切换；

3、设置每张图片出现的时间；

4、添加轮播焦点；

一、用li标签的background-image是为了实现纯CSS的动态切换。

二、规定一个@keyframes的规则，使图片按照这个规则进行切换。每张图片显示分为三个阶段：淡入，显示，淡出。在各个阶段显示出来的效果用百分比来规定。我用了五张图片，假定整个切换过程耗时20秒，每张图片显示3秒，切换一次1秒。分别对应的是15%，5%。

三、为了控制图片出现的时间，需要设置animation-delay。第一张图片是一开始就呈现的，所以直接调至5%阶段，即将animation-delay设置为-1秒。第二张跟第一张相隔时间为4秒，以此类推，每一张图片都跟前面的图片相差4秒。

四、添加轮播焦点是为了告诉浏览网页的人有几张图片。轮播焦点的动态实现跟图片是一样的，跟上面的代码几乎一致。

最后说一下学到的一个新的点：z-index。这是用来实现同一个位置上不同层次的元素位置的属性。可以使得元素之间呈现出一定的层次感而不是单纯的被覆盖。

还有就是图片的高度。因为高度不是定值，所以用在padding中显示图片的方法。

  /*设置图片的高度，请根据具体需要修改百分比，响应式及时修改此值*/
  .slider,.slider-item{padding-bottom:55%;}