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

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: 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>       

via：http://www.w2bc.com/Article/32925