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

王朝学院·作者佚名  2016-05-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

支持移动触摸设备的简洁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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航