//適用於全屏復古型
jQuery FlexSlider
$('.flexslider').flexslider({
animation: "fade", //圖片變換方式:淡入淡出或者滑動slideDirection: "horizontal", //圖片設置爲滑動式時的滑動方向:左右或者上下
slideshow: true, //載入頁面時,是否自動播放
slideshowSpeed: 7000, //自動播放速度毫秒
animationDuration: 600, //內容切換時間
touch: //是否支持觸摸滑動
directionNav: true, //是否顯示左右控制按鈕
controlNav: true, //是否顯示控制菜單
keyboardNav: true, //鍵盤左右方向鍵控制圖片滑動
mousewheel: false, //鼠標滾輪控制製圖片滑動
minItems:1 //一次最少展示滑動內容的單元個數
maxItems:0 //一次最多展示滑動內容的單元個數
move:0 //一次滑動的單元個數
prevText: "Previous", //String: 上一項的文字
nextText: "Next", //String: 下一項的文字
pausePlay: false, //Boolean: 是否顯示播放暫停按鈕
pauseText: 'Pause', //String: 暫停文字
playText: 'Play', //String: 播放文字
randomize: false, //Boolean: 是否隨機幻燈片
slideToStart: 0, //Integer: 初始化第一次顯示圖片位置
animationLoop: true, //是否循環滾動
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //鼠標滑向滾動內容時,是否暫停滾動
pauseOnHover: false, //鼠標糊上去是否暫停
controlsContainer: "", //Selector: be taken.
manualControls: "", //自定義控制導航
manualControlEvent:"", //String:自定義導航控制觸發事件:默認是click,可以設定hover
start: function(){}, //加載第一頁觸發
before: function(){}, //每個滾動動畫開始時異步觸發
after: function(){}, //每個滾動動畫結束時觸發
end: function(){} //滾動到最後一頁時異步觸發
});
//適用帶點特效的輪播
jQuery Cycle Plugin
官方demo http://jquery.malsup.com/cycle/
$(id).cycle({
fx : 'fade',
speed : 700,
timeout : 3000,
pager : '.promotions .ss_paging',
next:'#cl2',
prev:'#cl1',
pause:true,
before : function(currSlideElement, nextSlideElement) {
}
});
fx:'fade' 值:字符串,作用:選擇特效.切換效果是它的重頭戲,我統計過,jquery.cycle.
speed:300 值:正整數,作用:圖片漸變效果持續時間
timeout:3000 值:正整數,作用:切換間隔時間
pause:1 值:布爾值,作用:決定鼠標指上去時是否暫停
next:” 值:字符串,實際是一個jquery對象,如’#s1′;作用:指定觸發變動到下一張事件的元素
prev:’‘ 值:同next;作用:指定觸發變動到上一張事件的元素
pager: 值:一個jquery對象;作用:指定頁碼元素,如多圖片滾動時那個數字序號條
pagerEvent:’mouseover’ 值:鼠標事件;作用:指定頁碼觸發事件
pauseOnPagerHover:true 值:布爾值;作用:爲true時,鼠標指向頁碼區時暫停切換
before: 值:函數;作用:指定變動開始前調用的函數
after: 值:函數;作用:指定變動結束後調用的函數