（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
动画是由多幅连续的图片组成，按顺序切换不同的图片给人一种动画的感觉，切换的速度越快动画的感觉越真实，当速度达到1秒24幅图片的时候，人的肉眼就无法分辨了，这就是所说的24帧。canvas中的动画其实就是循环执行擦除和绘制的操作，并且一般会在操作之前保存环境，操作之后恢复环境。使用canvas制作动画由两个关键点：循环执行，绘制每次显示的图片。循环执行主要有两种方式，一种是使用前面所学过的setInterval或者setTimeout方法；另一种是调用新增加的专门用于动画的requestAnimationFrame方法，这个方法不需要设置间隔时间，直接将处理逻辑写入参数的回调函数中就可以了。但是requeseAnimationFram自身需要被放到回调函数中，另外，它的启动操作可以用cancelAnimationFrame方法来取消。
示例：
zepto.js有的需要自己引用touch.js额外js文件才支持触摸事件,touch.js可以到zepto的gihub上下载如果只是写简单的效果,直接给页面上的body绑定一个swipeup事件swipedown事件来自己写动画切换(如果需要zepto.js支持jquery类似的动画效果需要继续添加额外的fx.js)
