Home » jQuery 外掛

[jQ]CrossSlide jQuery plugin 0.6.2

範例 1
沒錯!只要 1,200 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!



CrossSlide 是可以讓圖片產生不輸給 Flash 的輪播效果。除了基本的原地輪播效果之外,還能做到滑動效果或是讓人有視覺引導(Ken Burns)效果的輪播呢。
若還要進一步的控制輪播的暫停及恢復的功能時,得同時搭配使用 Pause jQuery plugin 0.1

套件名稱:CrossSlide jQuery plugin
套件版本:0.6.2
作者網站:https://github.com/tobia/CrossSlide
套件網址:N/A
發佈日期:2010-09-29
檔案大小:13.2 KB
檔案下載:jquery.pause.js
引用檔案:jquery.pause.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
sleep(選填)
描述: 圖片輪播間隔;單位秒
預設值: 無
 
fade(選填)
描述: 圖片淡入時間;單位秒
預設值: 無
 
speed(選填)
描述: 若採用移動式時的速度;不可與 sleep 同時存在
預設值: 無
 
doubleFade(選填)
描述: 是否採用淡出淡入雙重效果
預設值: 無
 
loop(選填)
描述: 輪播次數
預設值: 無
 
shuffle(選填)
描述: 是否隨機輪播
預設值: 無
 
variant(選填)
描述: 滑動時是否加上 easing 效果;若為 true 則預設 easing 為 'swing'
預設值: 無
 
easing(選填)
描述: 滑動時的 easing 效果
預設值: 無

圖片參數說明:

檢視原始碼 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
src(選填)
描述: 圖片位置
預設值: 無
 
href(選填)
描述: 若有指定則會加上超連結
預設值: 無
 
onclick(選填)
描述: 當點擊圖片或超連結時觸發的動作
預設值: 無
 
alt(選填)
描述: 圖片 alt 屬性
預設值: 無
 
rel(選填)
描述: 圖片或超連結 rel 屬性
預設值: 無
 
target(選填)
描述: 如果有設定 href 且 target 時,則會在超連結上加上 target 屬性
預設值: 無
 
dir(選填)
描述: 滑動方向;允許的值有 'up', 'down', 'left''right'
預設值: 無
 
from(選填)
描述: 圖片起始時的座標及縮放比例
預設值: 無
 
to(選填)
描述: 圖片結束時的座標及縮放比例
預設值: 無
 
time(選填)
描述: 從 from 到 to 的時間
預設值: 無

方法說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 產生 CrossSlide 輪播效果
$(selector).crossSlide(opts, plan, callback);
 
// 凍結 CrossSlide 輪播效果
$(selector).crossSlideFreeze();
 
// 結束 CrossSlide 輪播效果
$(selector).crossSlideStop();
 
// 重新啟動 CrossSlide 輪播效果
$(selector).crossSlideRestart();
 
// 暫停 CrossSlide 輪播效果(需配合 Pause jQuery plugin)
$(selector).crossSlidePause();
 
// 恢復 CrossSlide 輪播效果(需配合 Pause jQuery plugin)
$(selector).crossSlideResume();

使用範例:

檢視原始碼 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
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pause.js"></script>
<script type="text/javascript" src="jquery.cross-slide.js"></script>
<style type="text/css">
	#test1, #test2 {
		width: 400px;
		height: 250px;
		border: 10px solid #ccc;
		margin-top: 20px;
	}
</style>
<script type="text/javascript">
	$(function() {
		// 使用滑動式的輪播
		$('#test1').crossSlide({
			speed: 15,
			fade: 1
		}, [
			{ src: 'images/P1030012.jpg', dir: 'up' },
			{ src: 'images/P1030013.jpg', dir: 'down' },
			{ src: 'images/P1030023.jpg', dir: 'right' },
			{ src: 'images/P1030030.jpg', dir: 'left' },
			{ src: 'images/P1030039.jpg', dir: 'up' }
		]);
 
		// 使用視覺引導式的輪播
		$('#test2').crossSlide({
			fade: 1
		}, [
			{ 
				src: 'images/P1030012.jpg', 
				from: '100% 80% 1x',
				to:   '100% 0% 1.7x',
				time: 3
			},
			{ 
				src: 'images/P1030013.jpg', 
				from: 'top left',
				to:   'bottom right 1.5x',
				time: 2
			},
			{ 
				src: 'images/P1030023.jpg',
				from: '100% 80% 1.5x',
				to:   '80% 0% 1.1x',
				time: 2	
			},
			{ 
				src: 'images/P1030030.jpg', 
				from: '100% 50%',
				to:   '30% 50% 1.5x',
				time: 2
			},
			{
				src: 'images/P1030039.jpg',
				from: '100% 80% 1x',
				to:   '30% 50% 1.5x',
				time: 2
			}
		]);
	});
</script>
 
<body>
	<div id="test1">Loading...</div>
 
	<div id="test2">Loading...</div>
</body>
範例 1

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

5 筆針對 [jQ]CrossSlide jQuery plugin 0.6.2 的迴響

  1. 請問一下圖片有辦法CSS設定成百分比寬度的嗎? (Responsive Design)
    例: width: 400px; -> width: 100%;
    有沒有辦法達到這樣的效果? (因為直接改好像圖片就動不了了)

發表迴響