只用CSS跟HTML做出无缝衔接的轮播图效果

首先，想要完成以上所说的效果，我们就需要用到CSS3的 animation 动画属性。

接下来就开始实现效果：

首先，在HTML里面放入需要轮播的图片：

 这里可能就要问了，为什么用JavaScript只需在末尾多添加一张图片就行，我这里却多添加了三张呢？

别急，等到后面我会另外说明的。

回归效果实现，HTML把需要的效果完成后，接下来就先把样式解决了：

这是完成样式后在浏览器的效果：

那么静态效果有了，怎么让它动起来呢？

那就要用到我开头所说的CSS3的 animation 属性了

代码如下：

把上面代码补上后，轮播图效果可以说就出来了。

但是，我上面的那个问题来了，我为什么要多放三张图片呢？

首先给大家看没有那三张图片的效果：

没有那三张图片，那么代码运行到后面，就会出现这种空白的情况，这时就有人会说，那我把上面设置动画里的margin-left改成一到最后一张就跳回到开头那张不就行了？

诶，还真不行，因为你这样做出来的效果是最后一张一出现，页面会明显的停顿一下然后就立马跳转到第一张图片。

那如果跟JavaScript一样在后面添加一张开头图片呢？其实这样的效果跟第一个做法一样，会停顿一下然后直接跳转到第一张，而我们要完成的效果是无缝衔接。

那这时后面那三张图片的作用就来了，因为我们上面设置动画执行到最后的margin-left是 -1500px嘛，但是我们图片设置的宽度是300px，也就是说这个动画执行到最后其实只会隐藏掉前面那五张图片然后就会出现空白（在没有那三张图片的情况下），而这是那三张图片就可以补上那空白，又因为我们设置的是重复执行动画，所以当那五张图片被隐藏掉后margin-left就会回到0px，但是我们有那三张图片在，所以当margin-left回到0时，前面的图片刚好和这三张图片重合了，所以就完成了无缝衔接。具体可以看我代码实现的效果。