---

实现思路:

需求: 实现三张图片无缝轮播

1:  定义一个父级div ,

这个div的宽度为轮播图片元素的宽度 

本文这里用的img宽度是114px, 溢出的时候设置属 性:overflow: hidden;

width: 114px;

overflow: hidden;

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

width: calc(114px * 4);//这里设置四张图片宽度的总和,第四张图片与第一张图片相同,why?往下看

animation: keyframe 7s ease 0s infinite normal;

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

width: 114px;

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(-114px, 0)}

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

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

}

---

全部代码链接

css3无缝轮播图片