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+