Home » jQuery 外掛

[jQ]CloudCarousel 1.0.3

[ 日期： | 瀏覽：15,041 | 迴響：22 ]
範例 1
請協助我把這個效果加到我的網站 (只要 1,200 元)
沒錯!只要 1,200 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



CloudCarousel 是能讓我們把圖片弄成 3D 立體的環狀瀏覽的套件。除了可以透過左右鈕來旋轉切換之外，若在引用 Mouse Wheel Extension 後則能支援滑鼠滾輪來控制呢。

套件名稱：ACloudCarousel
套件版本：1.0.3
作者網站：http://www.professorcloud.com/mainsite/carousel.htm
套件網址：N/A
發佈日期：2010-05-13
檔案大小：11.6 KB
檔案下載：cloud-carousel.1.0.3.js
引用檔案：jquery.mousewheel.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

minScale(選填)
描述： 套用到最遠項目的縮放值
預設值： 0.5
 
reflHeight(選填)
描述： 倒影的高度，若設成 0 表示沒有倒影
預設值： 0
 
reflGap(選填)
描述： 圖片跟倒影的間距
預設值： 0
 
reflOpacity(選填)
描述： 倒影的透明度：0 表示完全透明，而 1 表示不透明
預設值： 0.5
 
xRadius(選填)
描述： 圓的寬度；預設會用容器的寬 / 2.3
預設值： 0
 
yRadius(選填)
描述： 圓的高度，透過修改此值可以改變傾斜度；預設會用容器的高 / 6
預設值： 0
 
xPos(選填)
描述： 圓心的 x 座標(水平)，通常會設成如容器寬度的一半
預設值： 0
 
yPos(選填)
描述： 圓心的 y 座標(垂直)，通常會設成如容器高度的一半
預設值： 0
 
buttonLeft(選填)
描述： 用來控制往左旋轉的元素，不一定要在容器裡面
預設值： null
 
buttonRight(選填)
描述： 用來控制往右旋轉的元素，不一定要在容器裡面
預設值： null
 
titleBox(選填)
描述： 用來顯示圖片 title 屬性用，不一定要在容器裡面(滑鼠移到圖片上時也會有作用)
預設值： null
 
altBox(選填)
描述： 用來顯示圖片 alt 屬性用，不一定要在容器裡面(滑鼠移到圖片上時也會有作用)
預設值： null
 
FPS(選填)
描述： 旋轉時的每秒速度，數字越高會旋轉越快。但如果客戶端電腦效能不好時，可能會造成反效果
預設值： 30
 
speed(選填)
描述： 圖片跟圖片項目間的移動速度，建議值應為 0.1 ~ 0.3 之間。(可允許的值應是大於 0 且小於 1)
預設值： 0.2
 
autoRotate(選填)
描述： 是否自動往左或是往右的旋轉；允許的值有 'no', 'left' 及 'right'
預設值： 'no'
 
autoRotateDelay(選填)
描述： 自動旋轉時的延遲時間，建議最設為 1000(1000毫秒表示1秒)
預設值： 1500
 
mouseWheel(選填)
描述： 如果設為 true 則支援滑鼠滾輪來切換上下張圖片。但需要引用 Mouse Wheel Extension。
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定的區塊轉換成 CloudCarousel 效果
$(selector).CloudCarousel(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cloud-carousel.1.0.3.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<style type="text/css">
 #carousel1 {
	width: 570px;
	height: 384px;
	background: url(images/bg.jpg);
	overflow: scroll;
}
.cloudcarousel img {
	width: 128px;
	height: 164px;
}
.carouselLeft {	
	display: none;
	position: absolute;
	top: 20px;
	right: 64px;
	background: url(images/rotate-left.png);	
	width: 40px;
	height: 40px;
	background-position: 0px 0px;
}
.carouselLeft:hover {		
	width: 40px; 
	height: 40px;
	background-position: 0px 40px;
	cursor: auto;
}
.carouselRight {
	display: none;
	position: absolute;
	top: 20px;
	right:20px;
	background: url(images/rotate-right.png);	
	width: 40px;
	height: 40px;
	background-position: 0px 0px;
}
.carouselRight:hover {	
	width: 40px;
	height: 40px;
	background-position: 0px 40px;
}
#da-vinci-title {
	display: none;	
	color: #f90;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 17px;
	font-weight: bold;
	margin: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
	width: 80%;
}
#da-vinci-alt{
	display: none;
	color: #ddd;
	margin: 20px;
	margin-top: 0px;
	font-size: 14px;
	font-weight: bold;
}
</style>
<script type="text/javascript">
$(function(){
	// 把 #carousel1 轉換成 CloudCarousel 效果
	// 設定其 title, alt 及控制左右旋轉的元素
	// 並讓其自動往左旋及支援滑鼠滾輪
	$("#carousel1").CloudCarousel({
		reflHeight: 56,
		reflGap: 2,
		titleBox: $('#da-vinci-title'),
		altBox: $('#da-vinci-alt'),
		buttonLeft: $('#but1'),
		buttonRight: $('#but2'),
		yRadius: 40,
		xPos: 285,
		yPos: 120,
		speed: 0.15,
		autoRotate: 'left',
		mouseWheel: true
	});
});
</script>
 
<body>
	<div id="carousel1">
		<img class="cloudcarousel" src="images/test9.png" alt="Self-portrait in red chalk, circa 1512-1515." title="Leonardo Da Vinci" />
		<img class="cloudcarousel" src="images/test1.png" alt="Oil on cotton wood, circa 1503–1505." title="Mona Lisa" />
		<img class="cloudcarousel" src="images/test2.png" alt="Oil on wood panel, 1485." title="Lady with an Ermine" />
		<img class="cloudcarousel" src="images/test3.png" alt="Oil on canvas, circa 1501." title="Madonna of the Yarnwinder" />
        <img class="cloudcarousel" src="images/test4.png" alt="Oil on canvas (transferred from panel), circa 1490." title="Madonna and the Child" />
		<img class="cloudcarousel" src="images/test5.png" alt="Oil on walnut panel transferred to canvas, circa 1510–1515." title="Bacchus" />
		<img class="cloudcarousel" src="images/test6.png" alt="Oil on panel, circa 1478–1480." title="Madonna of the Carnation" />
		<img class="cloudcarousel" src="images/test7.png" alt="Charcoal, black and white chalk on tinted paper, circa 1499–1500." title="The Virgin and Child with St. Anne and St. John the Baptist" />
		<img class="cloudcarousel" src="images/test8.png" alt="Oil on panel, circa 1510." title="The Virgin and Child with St. Anne" />
 
		<div id="but1" class="carouselLeft"></div>
 		<div id="but2" class="carouselRight"></div>
 
		<p id="da-vinci-title"></p>
		<p id="da-vinci-alt"></p>
	</div>
</body>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

附註：
使用 CloudCarousel 時並不用什麼 CSS 設定，只是要把圖片加上 .cloudcarousel 即可。建議先把控制左右旋轉及、顯示 Title 及 Alt 用的元素先設 display 為 hidden，這樣當 JavaScript 被停用時才不會出現。同時也把容器的 overflow 設成 scroll，，這樣當 JavaScript 被停用時才能出現捲軸讓使用者來使用。

基本的 HTML 架構：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- 容器 -->
<div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            
	<!-- 只要圖片的 class 設成 cloudcarousel 則會被套用 -->
	<!-- 也可以在圖片外加上超連結 -->
	<img class = "cloudcarousel" src="#" alt="alt" title="title" />
	<img class = "cloudcarousel" src="#" alt="alt" title="title" />
	<img class = "cloudcarousel" src="#" alt="alt" title="title" />
	<img class = "cloudcarousel" src="#" alt="alt" title="title" />
</div>
 
<!-- 控制左右旋轉的鈕 -->
<input id="left-but"  type="button" value="Left" />
<input id="right-but" type="button" value="Right" />
 
<!-- 用來顯示圖片的 title 及 alt 使用 -->
<p id="title-text"></p>
<p id="alt-text"></p>

22 筆針對 [jQ]CloudCarousel 1.0.3 的迴響

1 2
1 2

發表迴響