写一个“3D图片循环轮播”的个人想法

在QQ音乐上有这样一个轮播，如下图：

Paste_Image.png

图片循环播放，移动到后面的图片会缩小，转换的时候有动画。

1. 先把静态样式写出来，

• 把包裹容器设置position:relative，图片设置为absolute，这样可以通过设置left/ right的值来设置每一张图片的位置。
• 其中用到CSS3的标签transform:scaleY()设置每一个图片的缩小幅度，及transition:all 1s来设置动画时间，这样图片变化的时候就会有一个动画的效果。（注：使用CSS3属性请注意不同浏览器之间的兼容问题及是否支持的问题，能不能用可以上http://caniuse.com/ 上查询）
• 为了能实现第一张图片在最上面，其他看上去被“盖住”的效果，我设置了图片的z-index第一张设置了最大的值。同事设置了不同的透明度opacity,增加美观。
  由于每一张图片的位置是不一样的，所以每张图片我给了不同的Class。
  这样基本静态的样式就写出来了。
  
  

  Paste_Image.png

2.写动画

由于每次转动，每一张图片有多个样式变化，包括：

1. 位置的变化
2. 大小的变化
3. 透明度的变化
4. z-index的变化

由于这么多变化不能像无缝轮播那样通过计算位置来改变图片的出现，而且这些图片一直显示在浏览器中。所以只能每次点击按钮都把所有的图片的class改变。这个改变是有规律的，点击右转的时候：
第一张（最上面的那张）-->右面第一张，右面第一张--->右面第二张，右面第二张--->左面第二张，左面第二张-->左面第一张，左面第一张-->第一张（最上面的那张）。这个过程其实就是样式的转变过程。

通过这个思路，一开始我是遍历图片，通过attr("class")获得图片的class,然后一个个判断，删除原来的样式，增加新的样式。这样是能实现效果，但是代码累赘。

最后我用的方法是
声明一个新的数组var arr=[]，
数组里把样式名按顺序放在数组里面var arr=[1,2,3,4,5]。(数字代表样式名)
然后遍历图片，遍历的时候操作数组，通过cls=arr.shift()删除并获得数组的第一个样式名字
把第一个样式名添加到数组的最后，arr.push(cls)，这是数组变为[2,3,4,5,1]
然后图片[i]的class==arr[i]；
这样同样能实现样式按顺序变化，而且代码简单了很多。

下面是我的小demo:(两个方法都有，第一个注释掉了。第一个含有自动播放！)
[3D图片循环轮播](file:///Users/luyang/Desktop/git/member/%E9%99%86%E6%97%B8%E5%97%A3/%E8%BD%AE%E6%92%AD/3D%E5%9B%BE%E7%89%87%E8%BD%AE%E6%8D%A2%E8%BD%AE%E6%92%AD.html)