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