对对对，就这样

来来来，手把手教你们

在漫漫的前段学习过程中，轮播已经成为必不可少的前段需求，下面我就给大家说一种超级简单的方法实现无缝轮播滚动。

要求: 实现图片无缝轮播

1:  定义父级div

这个div的宽度为轮播图片元素的宽度 ，暂时不设置高度，据我了解，如果存在响应式，高度会根据情况变化，说多了说多了，这里先给大家说最简单的方法实现无缝轮播。

在这里图片宽度设置为200px，, 外边距溢出是overflow: hidden;大家都会吧

width: 200px;

overflow: hidden;

2: 在父级div下面定义一个div作为轮播图片容器 ,并且添加动画效果,设置属性为

width: 800px;这里设置四张图片宽度的总和,第四张图片与第一张图片相同。

别问我为什么，宝宝脾气不好。

一言不合就会打人的，我告诉你。

自定义动画，参数我就不说了，很长一串参数，这里我就不说了，自行百度。

animation: keyframe 7s ease 0s infinite normal;

3: 在轮播图片容器里面定义并统一每个图片的宽度, 并且让每个图片排成一行:(左浮动或者设置display: inline- block)

width: 200px;

float: left; 使用这行代码或者下面这行代码,下面那行代码需要消除每个img之间的间距

/*display: inline-block;*/

4: 第2步中的keyframe设置动画帧数,

    0%,14% 这样的写法的意义在于:

    从0%帧数开始轮播下一张图片,

    在14%帧数开始停止直到28%

    后面的以此类推

这里设置了四段运动 (0%,14%) (28%,42%) (56%,70%) (84%,100%)

其中(84%,100%)轮播的图片是跟第一张图片是相同,当animation设置了noramal值后,动画会从头播放,

如果最后一张图片跟第一张图片不一样,动画从头播放, 就会有切换的效果

设置最尾的图片跟第一张相同后,当 100% ==> 到 0% 时因为图片一样,看不到切换的效果,相当于蒙蔽了你的眼睛

@-webkit-keyframes keyframe{

  0%,14% { transform: translate(0px, 0)}

  28%,42% {transform: translate(-200px, 0)}

  56%,70% { transform: translate(-400px, 0)}

  84%,100% {transform: translate( -600px, 0)}

}

---

大概你做出来后心情会像一个三岁的孩子

希望大家都能学会。