Home » jQuery 外掛

[jQ]CloudCarousel 1.0.3

範例 1
沒錯!只要 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 用的元素先設 displayhidden,這樣當 JavaScript 被停用時才不會出現。同時也把容器的 overflow 設成 scroll,,這樣當 JavaScript 被停用時才能出現捲軸讓使用者來使用。

基本的 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 的迴響

發表迴響