手撸移动端轮播图（内含源码）(1)，web开发计划

2. 手指可以拖动播放轮播图

3. 添加指示器，但只起到指示作用，点击不能切换图片

4. 不需要左右导航

5. 因为移动端轮播图的宽度一般与屏幕一样宽，所以focus不设置宽度

6. 移动端使用CSS3的方式进行图片切换，所以可以给 focus_img 去掉 定位和 left属性

7. 因为li标签设置为float:left 后，就变成了行内块元素，其宽度由内容决定，而其内容图片的宽度为520,，所以导致第四章图片被记下来，解决方案：设置每个li标签的宽度为ul的20%，再设置图片的宽度与li标签一样狂

案例分析:

1. 自动播放功能

2. 开启定时器

3. 移动端移动，可以使用translate 移动

4. 想要图片优雅的移动，请添加过渡效果

5. 自动播放功能-无缝滚动

6. 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断

7. 此时需要添加检测过渡完成事件 transitionend

8. 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0

9. 此时图片，去掉过渡效果，然后移动

10. 如果索引号小于0， 说明是倒着走， 索引号等于2

11. 此时图片，去掉过渡效果，然后移动

关于anime.js

Anime.js (/ˈæn.ə.meɪ/) 是一个轻量的JavaScript 动画库， 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。

下面我们轮播图的实现就是基于这个js插件（可以访问官网下载插件）

代码：

• 
• 
• 
• 
• 
•