Cloud Carousel集成介绍

最新推荐文章于 2024-05-29 09:37:33 发布

chongxing8779

最新推荐文章于 2024-05-29 09:37:33 发布

阅读量205

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/namespace/blog/16223

版权

示例HTML

以下是一个简单的示例HTMLpage，它使用4项（也就是4个img标签）创建了一个carousel，请认真学习这个例子，因为它包含了有用的注释和提示。你可以在这里看到它运行时的效果，如果你想支持鼠标滚轮，你必须导入这个插件：http://plugins.jquery.com/project/mousewheel

<html>

<head>

$(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>

</div>

</body>

</html>

JavaScript 参数设置

在页面顶部的javascript块中设置参数，如下：

$(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的图片中。

转载于:https://my.oschina.net/namespace/blog/16223

chongxing8779

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cloud Carousel集成介绍

示例HTML 以下是一个简单的示例HTMLpage，它使用4项（也就是4个img标签）创建了一个carousel，请认真学习这个例子，因为它包含了有用的注释和提示。你可以在这里看到它运行时的效果，如果你想支持鼠标滚轮，你必须导入这个插件：http://plugins.jquery.c...
复制链接

扫一扫