移动端轮播图——网易云音乐手机端样式

一开始直接用的是一种比较直观的方式，先计算好给定总盒子总宽度，及每个轮播图的宽度，最好事先把高度也确定了。

接着用li建立一个横向的图片排列，让图片在屏幕之外也按顺序地排列着，通过修改整个sliderBox的left为负值来移动，transition实现移动轨迹变化，再通过append移动开头/末尾的循环。

 

但实践发现这样是错的。

因为用户触摸拖动轮播图时，left值相应地变化，这时该到正中间的图片已经正确轮播到达了，但第二步处理最左端/最右端的图片循环时，将会使得整个sliderBox在视觉上进行多一次移动，即移动一次会前进两个图。

这是一个死胡同，因为整体来看，总宽度是一定的，如果现在不需要移动的路径动态效果，就没问题，但一旦需要动态效果，left就一定得单一地变化，那么当left的绝对值大于总宽度，就一定看不到轮播图了，所以难道要让轮播图的总宽度无限增加吗...

 

之后有了另一种思路，最大的区别在于不是让整体的轮播盒子的left值变化，而是具体划分到各个图片盒子的left值各自变化。

所以可以不让图片在屏幕之外也按规矩排列着，而是把图片集分为四个class，左侧、中间、右侧、底层，给定各个类准确的left值（中间也需设置left值，否则不会有变动轨迹），除了左中右外其他图片都堆在中间底层不可见（否则滑动时左侧或右侧图片置入底层的变换轨迹会出现），图片随用户移动即通过class的变化来实现left值的变化即可。

 

最终代码可见：https://github.com/pilipala6868/Js-function/tree/master/slider-mobile

效果可见：http://mxiaolin.pilipala6868.top（手机端打开）