jQuery Cycle Plugin && jQuery FlexSlider

//適用於全屏復古型

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:  值:函數;作用:指定變動結束後調用的函數

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章