[科技]支持移動觸摸設備的簡潔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>