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样式：
.frame {
position: relative;
font-size:;
line-height:;
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>