jquery.sldr.js - 兼容IE8和移动手机的响应式幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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