你的位置:首页 > Java教程

[Java教程]支持移动触摸设备的简洁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