支持移动触摸设备的jquery幻灯片插件lory

所属分类：媒体-幻灯片和轮播图

36494 382 查看评论 (8)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：lory是一款支持移动触摸设备的简洁的js幻灯片插件。该幻灯片插件可以通过纯js调用，也可以将该幻灯片插件作为jQuery插件来使用。该幻灯片的过渡动画具有硬件加速功能，并且可以定制

简要教程

lory是一款支持移动触摸设备的简洁的js幻灯片插件。该幻灯片插件可以通过纯js调用，也可以将该幻灯片插件作为jQuery插件来使用。该幻灯片的过渡动画具有硬件加速功能，并且可以定制是否使用easing效果。以下列出该幻灯片的一些特点：

支持移动触摸设备。
简单，界面整洁，纯js调用。
可以作为jQuery插件来使用。
过渡效果支持硬件加速。
可定制easing效果。
可无限循环，制作为旋转木马。
丰富的回调函数。

安装

可以通过node来按钮该幻灯片插件。

npm install --save lory.js
var lory = require('lory');

也可以通过bower来安装该幻灯片插件。

bower install lory --save

使用方法

HTML结构

该幻灯片使用的HTML结构是固定格式的，参考下面的HTML结构格式：

<div class="slider js_simple simple">
    <div class="frame js_frame">
        <ul class="slides js_slides">
            <li class="js_slide">1</li>
            <li class="js_slide">2</li>
            <li class="js_slide">3</li>
            <li class="js_slide">4</li>
            <li class="js_slide">5</li>
            <li class="js_slide">6</li>
        </ul>
    </div>
</div>

CSS样式

下面是该幻灯片的必要CSS样式：

.frame {
    position: relative;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
}
 
.slides {
    display: inline-block;
}
 
li {
    position: relative;
    display: inline-block;
}

JAVASCRIPT

完成上面的步骤之后就可以通过下面的方法来调用该幻灯片插件。

<script src="js/lory.min.js"></script>
<script>
    'use strict';
 
    document.addEventListener('DOMContentLoaded', function() {
        var simple = document.querySelector('.js_simple');
 
        lory(simple, {
            // options going here
        });
    });
</script>

你也可以将该幻灯片作为jQuery插件来调用：

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lory.min.js"></script>
<script>
    'use strict';
 
    $(function() {
        $('.js_simple').lory({
            infinite: 1
        });
    });
</script>

在同一个页面中集成多个幻灯片

<script src="js/lory.js"></script>
<script>
    'use strict';
 
    document.addEventListener('DOMContentLoaded', function() {
        Array.prototype.slice.call(document.querySelectorAll('.js_slider')).forEach(function (element, index) {
            lory(element, {});
        });
    });
</script>

公共方法

名称	描述
prev	幻灯片滚动到前一个slide
next	幻灯片滚动到下一个slide
slideTo	幻灯片滚动到指定的slide，参数： index {number}
setup	绑定事件侦听器，合并默认和用户选项，基于DOM元素设置幻灯片（只在初始化时调用一次）。如果DOM元素或用户选项改变或事件监听需要重新绑定是会调用该方法。
reset	设幻灯片回到开始位置，并重置当前的index（在Resize事件时会被调用）。

配置参数

名称	描述	默认值
slidesToScroll	幻灯片立刻滚动	default: 1
slideSpeed	有效的幻灯片滑动动画时间，单位毫秒	default: 300
rewindSpeed	从最后一个slide回倒所需的时间，单位毫秒	default: 600
snapBackSpeed	time for the snapBack of the slider if the slide attempt was not valid	default: 200
ease	cubic bezier easing 函数。可参考：http://easings.net/de default: '	cubic-bezier(0.455, 0.03, 0.515, 0.955)'
rewind	如果幻灯片到达最后一个slide，下一次点击会使幻灯片回到开始的位置	default: false

回调函数

函数名称	描述
beforeInit	初始化前被执行（在第一次setup函数中）
afterInit	初始化后被执行（在setup函数之后）
beforePrev	再点击 prev 按钮之前被执行
beforeNext	再点击 next 按钮之前被执行
beforeTouch	在触摸尝试之前执行（touchstart）
beforeResize	在每次 resize 事件之前被执行