Cloud Carousel集成介紹
示例HTMLjavascript
如下是一個簡單的示例HTMLpage，它使用4項（也就是4個img標籤）建立了一個carousel，請認真學習這個例子，由於它包含了有用的註釋和提示。你能夠在這裏看到它運行時的效果，若是你想支持鼠標滾輪，你必須導入這個插件：http://plugins.jquery.com/project/mousewheelhtml
<html>java
<head>jquery
<!-- 你能夠經過Google Content Network來導入JQuery庫，比從你本身的服務器上導入更好。. -->ajax
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>api
<!-- 導入CloudCarousel JavaScript文件 -->服務器
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.0.js"></script>app
<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>
<!-- 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的圖片中。
- 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 微服務實戰(三) - 服務註冊與發現
-
每一个你不满意的现在，都有一个你没有努力的曾经。