Cloud Carousel集成介绍

时间 2020-01-16

原文原文链接

示例HTMLjavascript

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

<html>java

<head>jquery

ajax

服务器

<script>ide

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

1. cloud-carousel.1.0.5 使用
2. Eolinker集成介绍
3. Cloud Native 介绍
4. Spring Cloud介绍
5. 1.spring-cloud介绍
6. 介绍Spring Cloud Stream
7. Spring Cloud GateWay 介绍
8. Spring Cloud Sleuth介绍
9. 17 Docker Cloud介绍
10. Spring Cloud Alibaba 介绍
更多相关文章...
• 网站主机介绍 - 网站主机教程
• RSS 元素 - RSS 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Spring Cloud 微服务实战(三) - 服务注册与发现