利用动画实现轮播图的自动播放

在逆战班学习有一个月了，这一个月我们学习了很多关于简单动态界面的制作，其中我觉得最有意思的是利用动画实现轮播图的自动播放。一般我们让轮播图自动播放需要利用JS的配合才能实现。但是我们也可以利用动画实现简单的轮播图的自动播放，接着我介绍下怎么利用动画来实现它。

我们得知道，什么是轮播图，所谓的轮播图就是在固定大小的容器里每次放置一张图片，然后通过位移来让它的所有图片依次通过这个容器，这样就可以实现图片的轮播；

首先我们先找4张图作为我们轮播图的图片：

然后我们来写他们的样式：还是一样的程序，我们先重置默认样式：

将我们的图片转为块是为了消除他默认样式的影响，但是带来了新的问题就是我们的图片在这种情况下是上下排列，我们这里以从右向左轮播为例，所以我们首先要将我们的四张图片排为左右排列，我们可以利用我们的浮动实现：

我们的这四张图都是1226460的，所以我们将我们的div大小也设置成1226460.

接下来我们给包含这四张图片的容器div一个宽为4倍大小（因为我们是4张图）的尺寸：（我们给最外层的容器一个边框，这样方便我们观察）

这时候我们的效果是这样的：

在实际操作过程中我们只想让它显示一张，可是这儿有四张，我们可以通过给我们的最外层元素设置一个溢出隐藏，这样我们实际的效果就是只可以看到一张，但是在它的后面还有三张图片只不过是看不到而已：效果如下图：

接下来我们该通过我们的动画来实现他们的轮播了：我们写我们的动画，先给我们的图片设置一下动画的名称、时间等属性：

然后通过@keyframes创建动画：

这样分段这是他们的位移就可以实现轮播图的动画效果。

总结：用动画去设置轮播图有它的弊端，就是当我们鼠标悬停的时候动画不会去静止，它会按照设置好的动画一直轮播，要想实现网页中的鼠标悬停的动画效果那就必须通过JS去实现了。