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> |
滑動效果很不錯用
只是那個放大圖片(視覺引導?)的功能
不知道是解析度關係還是如何
看得會頭暈= =
因為你的視覺被引導了..XD
請問一下圖片有辦法CSS設定成百分比寬度的嗎? (Responsive Design)
例: width: 400px; -> width: 100%;
有沒有辦法達到這樣的效果? (因為直接改好像圖片就動不了了)
這外掛套件並不支援 RWD, 你得額外找支援的才行!
可以搜一下 "jquery responsive slider"
謝謝分享~~
有辦法加上按鈕控制每段輪播嗎?
例如4段...