Slides

Contents

[hide]

1 参数设置
2 默认参数
3 样式约定
4 参考示例
5 Changelog

参数设置

参数	默认值	类型	描述
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() {}
    };

样式约定

参考示例

无效果

1
2
3
4

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

默认状态

1
2
3
4

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

淡入

1
2
3
4

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

有导航 next prev

1
2
3
4

< >

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

垂直

1
2
3
4

< >

$('.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）

1
2
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

Comments