首页 > 代码库 > jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel
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"> </div>
<div id="alt-text"> </div>
<a href="http://www.weiduduan.com/js" target="_blank"><img src="http://www.mamicode.com/images/9d03c58136f0f413d4f619536213bddb.jpg" title="jquery JScrollPane 插件" alt="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/web" target="_blank"><img src="http://www.mamicode.com/images/f2a366c8954d666360c4b214940963cf.jpg" title="jquery 图像预览效果" alt="jquery 图片放大异步加载图片制作一个简单的jquery 图像预览效果" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/yunzuo" target="_blank"><img src="http://www.mamicode.com/images/bb276cedeaeb0438ed3275a9711b1d69.jpg" title="jquery 图片滚动特效" alt="jquery 图片滚动特效制作 slide 图片类似窗帘式滚动" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/sucai" target="_blank" ><img src="http://www.mamicode.com/images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" title="jquery 图片展示" alt="jquery 图片展示制作图片类似金字塔式放大缩小展示" class="cloudcarousel" /></a>
<a href="http://www.weiduduan.com/js" target="_blank" ><img src="http://www.mamicode.com/images/e748fbed210baf3dfa8849af0f89dfd7.jpg" title="jquery 图片幻灯片" alt="jquery 图片幻灯片仿IBM首页焦点图切换，类似flash动态效果图片切换" class="cloudcarousel" /></a>
<div class="carouselLeft" id="but1"> </div>
<div class="carouselRight" id="but2"> </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: “”, //控制向右的按钮
jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel