jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel

插件名称-cloud carousel

最新版本-1.0.5

支持ie6-ie9，firefox，chrome，opera，safari等

1。引入jquery1.4.2.js 和CloudCarousel.1.0.5.js

2。添加页面自动加载插件js代码，进行初始化

$(document).ready(function(){
// 这初始化容器中指定的元素，在这种情况下，旋转木马.
　　$("#carousel1").CloudCarousel({
　　　　xPos:450,
　　　　yPos:110,

　　　　buttonLeft: $('#but1'),
　　　　buttonRight: $('#but2'),

　　　　altBox: $("#alt-text"),
　　　　titleBox: $("#title-text"),
　　　　FPS:30,
　　　　reflHeight:86,
　　　　reflGap:2,
　　　　yRadius:40,
　　　　autoRotate:'left',
　　　　autoRotateDelay: 1000,
　　　　speed:0.2,
　　　　mouseWheel:false,
　　　　bringToFront:false
　　});
});
</script>

3。html结构

<div class="weiduduan clearfix">

<div id="carousel1">

<div id="title-text">&nbsp;</div>
<div id="alt-text">&nbsp;</div>

<a href="http://www.weiduduan.com/js" target="_blank"><img src="images/9d03c58136f0f413d4f619536213bddb.jpg" title="jquery JScrollPane 插件" alt="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/web" target="_blank"><img src="images/f2a366c8954d666360c4b214940963cf.jpg" title="jquery 图像预览效果" alt="jquery 图片放大异步加载图片制作一个简单的jquery 图像预览效果" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/yunzuo" target="_blank"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" title="jquery 图片滚动特效" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/sucai" target="_blank" ><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" title="jquery 图片展示" alt="jquery 图片展示制作图片类似金字塔式放大缩小展示" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/js" target="_blank" ><img src="images/e748fbed210baf3dfa8849af0f89dfd7.jpg" title="jquery 图片幻灯片" alt="jquery 图片幻灯片仿IBM首页焦点图切换，类似flash动态效果图片切换" class="cloudcarousel" /></a>

<div class="carouselLeft" id="but1">&nbsp;</div>
<div class="carouselRight" id="but2">&nbsp;</div>

</div>
</div>

4。参数详解

reflHeight:0, //倒影的高度，单位是像素 
reflOpacity:0.5, //倒影透明度（0-1） 
reflGap:0, //图片与倒影之间的间隙，单位是像素 
minScale:0.5, //缩放比例 
xPos:0, //X轴偏移，一般设置成外框的一半，也就是实例中“#carousel1”的宽度的一半 
yPos:0, //Y轴偏移，这个可以自己调试看看，很直观的 
xRadius:0, //旋转幅度的水平半径，这个是猜的 
yRadius:0, //旋转幅度的垂直半径，这个是猜的，因为旋转的路径是个椭圆，你明白的
altBox:null, //显示图片alt属性的样式名称 
titleBox:null, //显示图片title属性的样式名称 
FPS: 30, //我猜是旋转运动的步长 
autoRotate: ‘no’, //是否自动播放，设置“left”或者“right”即可自动播放 
autoRotateDelay: 1500, //播放延时 
speed:0.2, //播放速度（0.1 ~ 0.3之间） 
mouseWheel: false, //是否支持滑轮，需要加在jQuery滑轮插件，官方的地址不见了，可以用百度“jquery.mousewheel”即可 
bringToFront: false, //这个参数设置为true，就是表示点击相应的图片，滚动到当前展示，一般是不打开自动播放时 
buttonLeft: “”, //控制向左的按钮 
buttonRight: “”, //控制向右的按钮