功能说明：
1.支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片。
2.可自行添加旋转的缓动模式，默认模式为：匀速，先快后慢，先慢后快。
3.可自定义旋转轨迹的宽和高。
4.支持IE6 7 8 9 10 firefox chrome等浏览器。
效果预览：
实现原理：
根据对图片在椭圆轨迹上的运动，动态改变缩放大小，实现立体的视觉效果。
代码分析：
复制代码 代码如下:
init:function(id,options){
var defaultOptions={
width:600, //容器宽
height:200, //容器高
imgWidth:100, //图片宽
imgHeight:60, //图片高
maxScale:1.5, //最大缩放倍数
minScale:0.5, //最小缩放倍数
rotateSpeed:10 //运转速度
}
options=util.extend(defaultOptions,options);//参数设置
this.container=util.$(id);
this.width=options.width;
this.height=options.height;
imgWidth=this.imgWidth=options.imgWidth;
imgHeight=this.imgHeight=options.imgHeight;
this.maxScale=options.maxScale;
this.minScale=options.minScale;
scaleMargin=this.maxScale-this.minScale;
this.rotateSpeed=options.rotateSpeed;
this.imgs=util.$$('img',this.container);
this.setContainerSize(this.width,this.height);
initImgRC(this.imgs);
}
首先是初始化函数，里面有defaultOptions作为默认值，用户也可以传入自定义的值，这些参数值包括：容器宽、容器高、图片宽、图片高、最大缩放倍数，最小缩放倍数，旋转速度等。初始化之后，调用setContainerSize函数。
复制代码 代码如下:
/* 设置容器尺寸 */
setContainerSize:function(width,height){
width=width||this.width;
height=height||this.height;
this.container.style.position='relative';
this.container.style.width=width+'px';
this.container.style.height=height+'px';
changeRotateWH.call(this,width,height);//改变容器尺寸后改变旋转轨迹
},
setContainerSize函数设置了容器的尺寸，容器尺寸的大小决定了旋转轨迹的大小，例如当我们设置容器的高等于宽时，轨迹变成一个圆形。容器尺寸设定后，调用函数changeRotateWH。
复制代码 代码如下:
/* 改变椭圆旋转轨迹的横半轴长，竖半轴长*/
var changeRotateWH=function(width,height){
var halfScale=(this.maxScale-this.minScale)/2;//旋转到中间位置时的图片的缩放大小
rotate={};
rotate.originX=width/2;//旋转原点X轴坐标
rotate.originY=height/2;//旋转原点Y轴坐标
rotate.halfRotateWidth=(width-this.imgWidth)/2; //旋转横半轴长
rotate.halfRotateHeight=(height-this.imgHeight)/2; //旋转竖半轴长
}
changeRotateWH函数的作用是根据容器的尺寸，设定椭圆旋转轨迹的横半轴长和竖半轴长（程序里面的halfRotateWidth和halfRotateHeight，具体计算方法为：轨迹高=（容器高-图片高）/2，轨迹宽=（容器宽-图片宽）/2）），在高中数学中，我们学过椭圆的标准方程：（），这里的横半轴和竖半轴分别对应椭圆方程的a和b。由于这里是横轴较长的椭圆，所以a>b。
复制代码 代码如下:
/* 设置图片旋转角和初始位置，大小 */
var initImgRC=function(imgs){
var len=imgs.length;
con=(2*Math.PI)/len;
for(var i=0;i<len;i++){
imgs[i].RC=i*con;
imgs[i].style.width=imgWidth+'px';
imgs[i].style.height=imgHeight+'px';
setImgPositionAndSize(imgs[i],0);
}
}
设置好椭圆的基本坐标系之后，我们可以根据图片的数量，把图片排列成一个椭圆的形状，首先我们可以通过 2π/图片数量 求得图片之间间隔所占的角度，然后把图片平均分布在椭圆轨迹上，此时所有图片就围成了一个椭圆的形状，到这里图片的初始分布状态就出来了，接下来的任务就是需要使图片沿着这个轨迹动起来。
复制代码 代码如下:
/* 设置图片位置和大小的匀速变化 */
var setImgPositionAndSize=function(img,path,direction){
direction=direction||'CW';
var dir=direction=='CW'?-1:1;
img.RC+=(path*dir);
modifyImgAngle(img);
setImgSize(img);
}
该函数根据每张图片位置的不同，设置图片对应的尺寸，另外我们还需要传入一个参数：direction（值为CW（顺时针）或ACW（逆时针）），之后通过不断增加图片的RC属性（旋转角），使图片匀速自动旋转，这时自动旋转的旋转模式就ok了。
复制代码 代码如下: