【用HTML+CSS实现简单的轮播图片效果】

本文主要从两种方式上实现轮播图片效果

---

方法一

***==================================================================
本方法为渐变轮播，实现效果如下


HTML部分

首先建立一个id为RotationPicture（轮播图片）的div，在在其中建一个id为screen的div，里面有4个图片链接。

CSS部分

确定RotationPicture位置尺寸等关系

将screen中的图片链接设置动画属性animation，动画周期为32s，无限循环，并且开始时完全透明。

动画过程：
时间曲线上，通过animation-delay动画延迟属性，第一张图片在0s始播放，第二张图片延迟到8s开始播放，第三张16s，第四张24s。
图片播放时，有3%的过度时间(即32*%3的时间)，这一段时间开始时图片透明度为0，在过度时间中透明度逐渐变为1(完全不透明)。
而为了实现两张图片交替过程中不出现一段时间的空白(即为前一张图片逐渐变透明，下一张图片逐渐出现中间的过渡期)，故留出3%时间来将两张图片变换重叠，即前一张图片变透明时，同时，下一张图片逐渐出现，这样显示界面就会变得连贯，舒适。

从而，渐变的轮播图片效果就实现了 。

方法二

***==================================================================
本方法为推动轮播，实现效果如下

HTML部分

CSS部分

首先用通配符设置内外边距均为0px
再将screen中的a标签设置为左浮动，并且设置动画属性，周期为8s并且无限循环
效果如下


设置container宽度高度均为200px(与图片宽度相同)，并且将溢出部分隐藏起来。
设置screen宽度为9999px(也不一定是9999，反正需要足够大，可以包含并排五张的最大宽度)

在并排五张图的直线上，以每张图左下角为坐标点，其横坐标分别为0px，200px，400px，600px，800px
因为之前的container尺寸就是一张图片的尺寸，并且超出部分我被隐藏，故不移动时只会显示一张图，再由上图动画效果中的横坐标移动实现两张图的推动轮播。