创建360旋转的jquery插件。

360旋转物体或实景的jquery插件。
http://jquery.vostrel.cz/reel
图片数据源可以有三种，第一种使用一张包含多个角度图像的图片，第2个是采用多张不同角度的图片，第三种是采用一张全景图片。

第1种数据源比较消耗内存，不需要指定图片路径，只要放在预览图片同一个目录下。命名格式为logo.png，logo-reel.png。

第2种数据源需要设置图片参数。

path:'samples/phone/',//图片保存的相对目录

images参数,

images:   phone_frames(20)，自己写phone_frames()函数。参数表示使用的图片数量。也可以不传入参数。默认目录下的所有图片。

function car_frames(frames){

                var every = 1, stack = []

                for (var i = 1; i <= frames; i += every) {

                    var name = [i, '.png'].join('');

   //图片命名规则。01-36

                    if (name.length < 6)

                        name = 'car_0' + name;

else{

name = 'car_' + name;

}

console.log(name);

                    stack.push(name)

                }

                return stack

            }

也可以直接赋给数组。

images:  [ 'badge-1.gif',

             'badge-2.gif',

             'badge-3.gif',

             'badge-4.gif' ]

speed：旋转速度。0则表示一开始是停止的。

loops：是否循环。如果图片前后不是完整连接的，则设置为false。

steps：需要把一个循环切割成多少份。相当于frames

step：初始化的是哪个step

stitched：全景图片的像素宽度。

clickfree：不用点击鼠标，只要移动鼠标就能旋转。mouse leave/enter

frames:总帧数

frame：默认的帧数

footage：一个镜头移动的frames数量。垂直或水平的frames数量。若该值比较小则看起来会有跳帧的感觉，导致不流畅的效果。最大值不能超过图片总数的一半。如图片总数是20，则最大值是10

delay：5.延迟播放的秒数。

cw：顺时针方向。

inversed：反转

orbital：旋转轴心。0表示上下左右轮流旋转。

rows：Number of rows for a multi-row setup (default 0 means single-row setup).在第几行上旋转。图片如果是立体的，有多个层次，该参数设置在哪个层上旋转。总共有多少个层次看frames和图片总数。例如frames是20，图片总数是120，则rows最大是6.设置为0则表示使用所有的图片。设置为1-6，表示使用对应的20张图片。

row:rows的初始化图片。

directional:true表示两个方向。

entry：默认为speed的速度。

目前存在的问题：在ipad2上旋转图片尺寸设置为768×313相对大点的尺寸，并且放置在上下第3页以上位置。旋转时图片会出现卡位的现象。改成小尺寸就没问题。放在第一页很流畅。pc上没有此问题。

问题剖析：

1、是否由于dom查找位置比较深消耗CPU造成的？但是第一页和第N页都处于同一个层次的li啊。旋转图片时，只是改变img的src或者background-position。

——————————

更新20130118：

最近使用了1.2版本的jquery.reel.js

有几个改动：

1、images可以支持##.png格式输入，自动遍历图片目录。但是必须以01或001开始。如果图片是428之类开始的，是无效的。只会从001开始设置。也支持"image_###.jpg"的格式。

支持   images:      'drone/#####.png|1..179|5',的格式。

比如图片名是001,006,011,017...

5就表示图片序号的间隔

2、增加了unreel()函数用来释放特效

3、增加了annotations函数用来在指定图片中设置文本等内容，如添加一个div之类的。

4、orbital:     3,必须设置表示旋转的轴心数量。否则默认是上下左右旋转。若只有一个方向则不要设置这个值或设置为0。默认0.表示有几个旋转方向。如果为3，images有36张图片。则一个方向轴会有12张图片.

5、steppable 允许通过鼠标点击，每次点击显示下一帧图片

6、directional 表示是否同时支持垂直和水平两个方向。默认false

7、suffix:      '-locomotion', 设置这个属性就不需要设置images属性。默认使用当前图片animal.jpg 对应的animal-locomotion.jpg文件名作为循环图片。

8、 velocity:    1,表示初始化时的速度。比如设置为3速度就比设置为1块。播放完一遍后速度会自动恢复到speed设置的速度。

9、 timeout:20, 是指用鼠标或touch暂停了reel动画之后，经过多少秒再恢复动画。这个属性只有对speed不是0时才有效

还增加了很多功能。请查看http://jquery.vostrel.cz/reel

api参考
http://test.vostrel.cz/jquery.reel/docs/jquery.reel.html