jquery.sldr.js是一款兼容IE8+和移动手机设备的响应式jQuery幻灯片插件。该幻灯片插件可以自适应图片宽度,提供丰富的回调函数,并且支持Android和IOS等移动触摸设备。它的特点还有:

  • 灵活的设置,可定义前后导航按钮,分页导航按钮等。
  • 可设置多重幻灯片宽度,可见区域,并且完全响应式设计。
  • 在初始化时提供丰富的回调函数。
  • 可以通过编程在页面加载之后动态的添加图片。
  • 兼容 IE 7+, Chrome, Safari, Firefox, IOS 3+, Android 3+

使用方法

在页面中引入jquery和jquery.sldr.js文件。

<script src="js/jquery.min.js"></script>   
<script src="js/stickyelements-animate.js"></script>                  
                
HTML结构

每一个幻灯片slide元素都需要一个唯一的class标识。

<div id="SLDR-ONE" class="sldr">
    <ul class="wrp animate">
        <li class="elmnt-one">
          <img src="img/Lake.jpg" width="1000" height="563">
        </li>
        <li class="elmnt-two">
          <img src="img/Mountain-Range.jpg" width="1000" height="563">
        </li>
        <li class="elmnt-three">
          <img src="img/Mt-Fuji.jpg" width="1000" height="563">
        </li>
        <li class="elmnt-four">
          <img src="img/Pink-Forest.jpg" width="1000" height="563">
        </li>
    </ul>
</div>             
                
CSS样式

下面的CSS样式用于使幻灯片从左向右移动。

.sldr {
    max-width: 825px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
    clear: both;
    display: block;
}

.sldr > ul.animate {
    -webkit-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */    
}

.sldr > ul > li {
    float: left;
    display: block;
    width: 825px;
}                 
                
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该幻灯片插件。

$( window ).load( function() {

    $( '.sldr' ).each( function() {
        var th = $( this );
        th.sldr({
            focalClass    : 'focalPoint',
            offset        : th.width() / 2,
            sldrWidth     : 'responsive',
            nextSlide     : th.nextAll( '.sldr-nav.next:first' ),
            previousSlide : th.nextAll( '.sldr-nav.prev:first' ),
            selectors     : th.nextAll( '.selectors:first' ).find( 'li' ),
            toggle        : th.nextAll( '.captions:first' ).find( 'div' ),
            sldrInit      : sldrInit,
            sldrStart     : sldrStart,
            sldrComplete  : sldrComplete,
            sldrLoaded    : sldrLoaded,
            sldrAuto      : true,
            sldrTime      : 2000,
            hasChange     : true
        });
    });
});                  
                

配置参数

jquery.sldr.js幻灯片的可用配置参数有:

参数 描述
focalClass 当前聚焦的slide的class名称,默认为:"focalPoint"。
offset 居中的slide的位置,默认为$(this).width() / 2
selectors 分页圆点的选择器,例如:$('ul > li'),无默认值。
toggle 用于切换focalClass的一系列元素,可用于显示或隐藏标题,例如:$('.descriptions > div''),无默认值。
nextSlide next slide的选择器,无默认值。
previousSlide previous slide的选择器,无默认值。
hashChange 可选的布尔值参数,用于传入回调函数。无默认值。
resizeDelay 浏览器窗口尺寸改变的延迟时间,默认为1。
sldrNumber 在插件初始化时幻灯片数量的增量,默认为0。
sldrInit 回调函数,接收函数名称。当sldr初始化后被DOM管理之前触发。
sldLoaded 回调函数,接收函数名称。当某个幻灯片被加载后触发。
sldrLoaded 回调函数,接收函数名称。当幻灯片被完全加载,并被DOM管理之后触发。
sldrStart 回调函数,接收函数名称。当幻灯片slide被聚焦前触发。
sldrComplete 回调函数,接收函数名称。当幻灯片slide被聚焦后触发。
sldrWidth 幻灯片的宽度。设置为"responsive"表示全屏宽度。如果要设置固定宽度可以设置一个具体的数值。
animate 接收函数名称。自定义动画。默认为jquery.sldr.js中的"base.animate"。
animateJquery 强制使用jquery animate()动画。默认为flase,使用的是CSS transitions动画。浏览器不支持CSS transitions时使用jQuery动画。
sldrAuto 动画过渡的自动定时器。默认为false。
sldrTime 动画过渡的时间。默认为8000。
isBrowser 为浏览器设置的变量,默认为navigator.userAgent。
isIE 为IE浏览器设置的变量。默认为flase,将根据navigator.userAgent来设置。

回调函数

/**
 * When the sldr is initiated, before the DOM is manipulated
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrInt( args ) { }

/**
 * When individual slides are loaded
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldLoaded( args ) { }

/**
 * When the full slider is loaded, after the DOM is manipulated
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrLoaded( args ) { }

/**
 * Before the slides change focal points
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrStart( args ) { }

/**
 * After the slides are done changing focal points
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrComplete( args ) { }                  
                
回调参数

回调函数会返回一个带下列项目的对象。

{ 
    'slides' : { 
        (array of slides) 
    }, 
    'callback' : {
        (the previous, current, next slide variables)
    }, 
    'config' : {
        (all of the original settings described above) 
}                 
                

Slides:

sld Slide jQuery object
slideNum Slide number
id Slide id
class_name Slide class
html Slide inner html()

Callback:

sldr 幻灯片的jQuery对象
prevFocalIndex 前一个slide的index()
prevSlideNum 前一个slide的号码
currentFocalIndex 当前slide的index()
currentClass 当前slide的class名称
currentID 当前slide的id
currentFocalPoint 从幻灯片左边到中间的像素距离
currentSlideNum 当前slide的号码
shiftWidth 从一个slide 切换到下一个slide的数量
nextFocalIndex 下一个slide的index()
nextSlideNum 下一个slide的号码

post load

post load image特性可以在页面加载之后逐一的加载图片。你需要根据下面的HTML结构,为每一个幻灯片元素添加一个sldr-load的class,然后插件就会根据 'class' , 'src' , 'alt' , 'title' , 'width' 或 'height'这些属性来加载所需要的图片。

<div id="SLDR-ONE" class="sldr">
    <ul class="wrp animate">
        <li class="elmnt-one">
          <div class="sldr-load" src="img/Lake.jpg" width="1000" height="563"></div>
        </li>
        <li class="elmnt-two">
          <div class="sldr-load" src="img/Mountain-Range.jpg" width="1000" height="563"></div>
        </li>
        <li class="elmnt-three">
          <div class="sldr-load" src="img/Mt-Fuji.jpg" width="1000" height="563"></div>
        </li>
        <li class="elmnt-four">
          <div class="sldr-load" src="img/Pink-Forest.jpg" width="1000" height="563"></div>
        </li>
    </ul>
</div>                  
                

jquery.sldr.js插件的github地址为:https://github.com/devowhippit/jquery.sldr