支持移动触摸设备的简洁js幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 支持移动触摸设备的简洁js幻灯片插件
支持移动触摸设备的简洁js幻灯片插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:04-08
    阅读:
简要教程

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 事件之前被执行

浏览器兼容

  • Chrome
  • Safari
  • FireFox
  • Opera
  • Internet Explorer 10+