创建走马灯效果

1、准备工作

创建走马灯文件夹，放入图片素材，生成基本结构。

 

 

2、创造播放台 

设置一个宽600px+高200px的播放台，加上边框线，使其在网页居中。

 

 

3、装入播放素材

 图片数量多且结构相同，这里使用ul>li结构：

 

 我们每次播放三张图片，单张图片设为200px*200px。

大盒子宽度设为200px*7=1400px，高度与播放台一致，去掉小圆点：

 小盒子宽度设为200px，高度与大盒子一致，添加向左浮动，使小盒子水平排列。

 

 图片宽度设为与小盒子一致，高度等比例缩放：

 

 

大盒子与播放台没有对齐，我们来清除内外边距：

 

 第3步完成啦： 

 

4、植入动画

定义使大盒子移动的动画（图片向右播放，所以大盒子向左移动，移动值为大盒子宽度1400px）：

调用动画（时长5s+匀速移动+无限循环）：

效果就是这样的

 

图片播放移出后仍在外面移动，这不是我们想要的效果。

 给播放台设置溢出隐藏，使图片播放移出后不再显示：

       

 改进后

 

可以看到，有明显的留白和卡顿问题。

解决方法：

在ul里面向下添加三张起始图片（播放台每次播放几张图片就给大盒子添加几张-从前到后），并给大盒子添加三张图片的宽度（1400px改为2000px）：

 

 最终效果就会完美循环了