参数设置

参数 默认值 类型 描述
container '.slides-container' String

slides 的 Dom容器，设置
btnNext null String

下一个，导航按钮（jquery selector）
btnPrev null String

上一个，导航按钮（jquery selector）
paginationClass null String pagination parent Class
current 'current' String 当前页，导航按钮高亮className，
circular false Boolean

循环滚动
effect 'default' String

滑动效果，[none, default ,fade , easing:easeOutExpo ,easing:easeOutSine , ...]

'none':没有切换效果,

'default':默认切换效果,

'fade':淡进淡出,

'easing:easeOutExpo':easing 库效果，需要加载jquery.easing.js

 
vertical false Boolean 滑动的方向，默认水平方向
visible 1 Number 可视个数
scroll 1 Number 滚动个数
fadeSpeed 500 Number 淡入淡出速度
slideSpeed 350 Number 滑动速度
play 0 Number 自动轮播必须设定,间隔毫秒
pause 0 Number 自动轮播必须设定，轮播划过，移开暂停多少毫秒继续轮播
hoverPause false Boolean 划过暂停
paginationEvent "click" String 页面按钮导航事件，可选'hover'
start 1 Number 初始化状态，默认第一个开始，静态样式应该同步，否则可能会出错
mouseWheel false Boolean 鼠标滚动事件

默认参数

    // default opts
    $.slider.defaults = {
        container: '.slides-container',
        btnNext: "", // Next button
        btnPrev: "", // Next button
        paginationClass: "",  // page button
        current:'current', 
        circular:false,
        effect:'default', // none|| default|| fade || easing:easeOutExpo || easing:easeOutSine || ...
        vertical:false, // default horizontal
        visible: 1, // visible count
        scroll:1, //  scroll count
        fadeSpeed: 500, // fade speed
        slideSpeed: 350,  // slide speed
        play: 0,  // duration time
        pause: 0, // pause time

        hoverPause: true, // haover pause
        mouseWheel: false, // action mouse wheel

        paginationEvent:'click', // pagination event
        start: 1, // start on el eq()
        // preload: false, 
        // preloadImage: '/img/loading.gif',    
        // autoHeight: false, 
        // autoHeightSpeed: 350, 
        before: function() {},
        callback: function() {}
    };

样式约定

    

        
 
            
     
              
    • 
              
    • 
              
    • 
              
    •

参考示例

无效果

$('.demo0').slider({
    container: '.slider-container',
    btnNext: '.next', 
    btnPrev: '.prev',
    paginationClass: '.num', 
    paginationEvent:"mouseover", // page 按钮 事件
    current:'on', //
    effect:'none', 
    play: 1000,  
    pause: 500,
    hoverPause: true// 划过是否停止
});

默认状态

$('.demo1').slider({
    container: '.slider-container',
    btnNext: '.next', 
    btnPrev: '.prev',
    paginationClass: '.num', 
    current:'on', // 
    play: 1000,  
    pause: 500,
    hoverPause: true // 划过是否停止
});

淡入

$('.demo2').slider({
    container: '.slider-container',
    btnNext: '.next', 
    btnPrev: '.prev',
    paginationClass: '.num', 
    current:'on', // 
    effect:'fade'
});

有导航 next prev

$('.demo3').slider({
    container: '.slider-container',
    btnNext: '.next', 
    btnPrev: '.prev',
    paginationClass: '.num', 
    current:'on'
});

垂直

$('.demo4').slider({
    container: '.slider-container',
    btnNext: '.next', 
    btnPrev: '.prev',
    vertical:true,
    paginationClass: '.num', 
    current:'on' // 
});

多图，effect:'easing:easeInOutBack'，无页按钮，循环滚动（长度:9,visible: 3, scroll:1）

$('.demo5').slider({
    container: '.slider-container',
    btnNext: '.next', 
    btnPrev: '.prev',
    effect:'easing:easeInOutBack',
    visible: 3, // 显示多少个
    scroll:1, // 滚动个数
    circular：true
});

多图,有页按钮，循环滚动（长度:9,visible: 3, scroll:3）

    $('.demo6').slider({
        container: '.slider-container',
        btnNext: '.next', 
        btnPrev: '.prev',
        paginationClass: '.num', 
        current:'on', 
        visible: 3, // 显示多少个
        scroll:3, // 滚动个数
        circular：true
    });

多图,无页按钮，循环滚动,鼠标滚动（长度:9,visible: 3, scroll:2,mouseWheel:true）

   
    $('.demo7').slider({
        container: '.slider-container',
        btnNext: '.next', 
        btnPrev: '.prev',
        //paginationClass: '.num', 
        //current:'on', 
        visible: 3, // 显示多少个
        scroll:3, // 滚动个数
        circular：true,
        mouseWheel:true
    });

Changelog

  • ~2013/01/08 : init commit
  • ~2013/04/02 : reconstruct the code
  • ~2014/05/01:support mouseWheel, optimize effect: none/fade implementation