幻灯片/轮播
支持移动触摸设备简洁js幻灯片插件
PetitQ
lory 是一款支持移动触摸设备的简洁的 js 幻灯片插件。该幻灯片插件可以通过纯 js 调用，也可以将该幻灯片插件作为 jQuery 插件来使用。该幻灯片的过渡动画具有硬件加速功能，并且可以定制是否使用 easing 效果。以下列出该幻灯片的一些特点：
支持移动触摸设备
也想出现在这里？联系我们吧
简单，界面整洁，纯 js 调用
可以作为 jQuery 插件来使用
过渡效果支持硬件加速
可定制 easing 效果
可无限循环，制作为旋转木马
丰富的回调函数
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 事件之前被执行 |
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
