高性能的jQuery/Zepto 3D旋转木马插件

cloud9carousel是一款高性能的基于jQuery或Zepto的3D旋转木马插件。它可以制作出类似专辑封面的效果。它还可以结合jquery.reflection.js来制作炫酷的图片倒影特效。它的特点有：

• 只有一个js文件，可以和jQuery或Zepto结合使用。
• 高性能，运行速度快。
• 简单易用。
• 通过reflection.js可以制作图片倒影效果。
• 支持鼠标滚轮操作（需要引入mousewheel plugin）。
• 支持自动播放。
• 通过requestAnimationFrame以固定的FPS来支持平滑的动画效果。
• 自动开启GPU来支持CSS3转换动画。
• 可以创建多个实例。
• 可以和任何HTML元素结合使用。

插件依赖

• 需要jQuery1.3+或Zepto 1.1.1+
• 倒影效果需要reflection.js（可选）
• 鼠标滚轮操作需要mousewheel plugin（可选）

使用方法

HTML结构

该旋转木马的基本HTML结构是使用一个<div>来包裹一组用于旋转的元素，如图片：

<div id="carousel">
  <img class="cloud9-item" src="images/1.png" alt="Item #1">
  <img class="cloud9-item" src="images/2.png" alt="Item #2">
  <img class="cloud9-item" src="images/3.png" alt="Item #3">
  <img class="cloud9-item" src="images/4.png" alt="Item #4">
  <img class="cloud9-item" src="images/5.png" alt="Item #5">
  <img class="cloud9-item" src="images/6.png" alt="Item #6">
</div>

<div id="buttons">
  <button class="left">
    ←
  </button>
  <button class="right">
    →
  </button>
</div> 
              

JAVASCRIPT

在页面DOM元素加载完毕之后可以通过下面的方法来初始化该旋转木马插件。

$("#carousel").Cloud9Carousel( {
  buttonLeft: $("#buttons > .left"),
  buttonRight: $("#buttons > .right"),
  autoPlay: 1,
  bringToFront: true
} );
              

配置参数

旋转木马参数

倒影选项

在你将reflection.js引入页面之后，可以配置它的一些参数：

mirror: {
  gap: 12,     /* 12 pixel gap between item and reflection */
  height: 0.2, /* 20% of item height */
  opacity: 0.4 /* 40% opacity at the top */
}                
              

注意，Zepto和reflection.js不能一起工作。

方法

下面的方法可以在旋转木马初始化时候在carousel对象上调用。

// Spin by three items clockwise
$("#carousel").data("carousel").go( 3 );                
              

回调函数

回调函数可以传入旋转木马的构造函数作为参数：

// Hide carousel while items are loading
$("#carousel").css( 'visibility', 'hidden' ).Cloud9Carousel( {
  bringToFront: true,
  onLoaded: function( carousel ) {
    // Show carousel
    $(carousel).css( 'visibility', 'visible' );
    alert( 'Carousel is ready!' );
  },
  onRendered: function( carousel ) {
    var item = $(carousel).data("carousel").nearestItem();
    console.log( "Item closest to the front: " + $(item).attr("alt") );
  }
} );