Cloud Carousel集成介绍
示例HTML
以下是一个简单的示例HTMLpage，它使用4项（也就是4个img标签）创建了一个carousel，请认真学习这个例子，因为它包含了有用的注释和提示。你可以在这里看到它运行时的效果，如果你想支持鼠标滚轮，你必须导入这个插件：http://plugins.jquery.com/project/mousewheel
<html>
<head>
<!-- 你可以通过Google Content Network来导入JQuery库，比从你自己的服务器上导入更好。. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- 导入CloudCarousel JavaScript文件 -->
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.0.js"></script>
<script>
$(document).ready(function(){
// 初始化carousels在指定的id为carousel1的标签中。
$("#carousel1").CloudCarousel(
{
xPos: 128,
yPos: 32,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
}
);
});
</script>
</head>
<body>
<!-- carousel容器 -->
<div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">
<!-- 所有使用"cloudcarousel"class的图片，都将加入carousel翻转项中。 -->
<!-- 你可以替换掉图片的links地址。 -->
<img class = "cloudcarousel" src="/images/carousel/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
<img class = "cloudcarousel" src="/images/carousel/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
<img class = "cloudcarousel" src="/images/carousel/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
<img class = "cloudcarousel" src="/images/carousel/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
</div>
<!-- 定义左右两个翻转控制button。 -->
<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />
<!-- 定义img标签中的alt和title属性值显示的元素。-->
<p id="title-text"></p>
<p id="alt-text"></p>
</body>
</html>
JavaScript 参数设置
在页面顶部的javascript块中设置参数，如下：
<script>
$(document).ready(function(){
// 初始化carousels在指定的id为carousel1的标签中。
$("#carousel1").CloudCarousel(
{
xPos: 128,
yPos: 32,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
}
);
});
</script>
任何参数不指定都将使用默认值。Any parameters not specified will have default values applied.
参数名 |
简介 (from V1.0.0) |
默认值 |
minScale |
应用到最远项的最小刻度，正面项的刻度是1，应用最远项为正面项的1/4，则可以设置minScale为0.25。 备注：该参数可以设置背面视觉最远的那张图片相对于正面第一张图片的大小。0.25相当于视觉上最远的那张图片相对于正面最近的图片的尺寸为1/4。 |
0.5 |
reflHeight |
应用到正面最近图片的，用像素表示的图片倒影高度。这个倒影是自动计算的。值为0的意思是不产生倒影。 备注：该参数是设置图片的倒影高度，像素为单位，例如：50，可以设置倒影高度为50像素。 |
0 |
reflGap |
图片和倒影之间的垂直间隔，以像素为单位表示。应用到正面最近的图片，其他自动计算。 |
0 |
reflOpacity |
指定倒影的透明度，0就是完全透明，1表示完全不透明。 |
0.5 |
xRadius |
水平图片环绕的半径，默认是容器宽度的1/2.3。 |
Width of container / 2.3 |
yRadius |
垂直图片环绕的半径，默认是容器高度的1/6。你可以修改这个值来调整环绕的倾斜程度。 |
Height of container / 6 |
xPos |
相对于容器中心的环绕圆周水平位置，你通常需要设置这个值为容器的宽度的一半。 备注：如果你设置这个值小于容器宽度一半，那么水平环绕的那个园就会撑破容器，你可能看不到全部。 |
0 |
yPos |
和xPos类似，只不过这个是垂直方向的。 |
0 |
buttonLeft |
旋转操作（向左旋转）的button元素，这个button可以在任何位置。 |
null |
buttonRight |
旋转操作（向右旋转）的button元素，这个button可以在任何位置。 |
null |
titleBox |
当鼠标悬浮在某个图片上时，显示img元素的title属性值的标签元素。这个元素可以在任何位置。 |
null |
altBox |
当鼠标悬浮在某个图片上时，显示img元素的alt属性值的标签元素。这个元素可以在任何位置。 |
null |
FPS |
这个值可以设置每秒的旋转帧数，设置很高可以实现很平滑的转动效果，但是对于机器差的用户来说可能会导致转动停顿，通常设置为30，是相对合适的效果。 备注：通过设置该参数可以调整转动速度。 |
30 |
参数 |
简介 (from V1.0.1) |
默认值 |
speed |
这个值用于调整转动速度的，值为0（不包括）到1（包括）的一个值。 备注：设置为0，则不会有转动效果，设置为1，则没有转动效果，而是立即切换到最终效果。 |
0.2 |
autoRotate |
设置自动转动效果，值可以是“left”和“right”，或者“no”。 备注：设置为“left”，则自动向左转动。设置为“right”，则自动向右转动，设置为“no”（默认），则不自动转动。 |
'no' |
autoRotateDelay |
自动转动的间隔时间，以毫秒为单位。1000为推荐值，也就是1秒转动一次。 |
1500 |
参数 |
简介 (from V1.0.2) |
默认值 |
mouseWheel |
假如设置值为“true”，则启动鼠标滚轮转动操作效果。但是你首先需要导入mouse wheel插件： http://plugins.jquery.com/project/mousewheel |
false |
Parameter |
Description (from V1.0.4) |
Default Value |
bringToFront |
假如设置为“true”，则启用点击某张图片则转动该张图片到正面。 |
false |
CSS 设置
Cloud Carousel运行不需要指定任何的CSS样式，但是，你完全可以设置自己的carousel容器、text boxes和buttons的样式。
你可能希望设置初始display为display:hidden，假如JavaScript被禁用则自动消失。如果用户的JavaScript被启用，该插件会设置display为display:inline。
设置容器的style中包含overflow:scroll是一个好主意，可以避免JavaScript无效时无法显示内容。
不要设置任何的样式到carousel的图片中。