JavaScript+css+HTML实现移动端轮播图（含源码）

1.移动轮播图

移动端轮播图与PC段轮播图，在技术选择上是有区别的，因为移动端的浏览器版本非常好，对于H5和CSS3的支持非常完美，所以很多效果可以CSS3的方式实现，比如可以使用 Transorm 属性替代原来的动画函数

• 可以自动播放图片
• 手指可以拖动播放轮播图
• 添加指示器，但只起到指示作用，点击不能切换图片
• 不需要左右导航
• 因为移动端轮播图的宽度一般与屏幕一样宽，所以focus不设置宽度
• 移动端使用CSS3的方式进行图片切换，所以可以给 focus_img 去掉 定位和 left属性
• 因为li标签设置为float:left 后，就变成了行内块元素，其宽度由内容决定，而其内容图片的宽度为520,，所以导致第四章图片被记下来，解决方案：设置每个li标签的宽度为ul的20%，再设置图片的宽度与li标签一样狂

2.案例分析

• 自动播放功能
• 开启定时器
• 移动端移动，可以使用translate 移动
• 想要图片优雅的移动，请添加过渡效果
• 自动播放功能-无缝滚动
• 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断
• 此时需要添加检测过渡完成事件 transitionend
• 判断条件：如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0
• 此时图片，去掉过渡效果，然后移动
• 如果索引号小于0， 说明是倒着走， 索引号等于2
• 此时图片，去掉过渡效果，然后移动

3.关于anime.js

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

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

代码：