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:;
line-height:;
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

支持移动触摸设备的简洁js幻灯片插件的更多相关文章

  1. 基于 jQuery支持移动触摸设备的Lightbox插件

    Swipebox是一款支持桌面.移动触摸手机和平板电脑的jquery Lightbox插件.该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放. 在线预览   源码下 ...

  2. 支持移动触摸的jQuery图片Lightbox插件

    简介 这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件.该LightBox插件可以在移动手机和桌面设备中运行,它具有响应式,预加载图片,键盘支持等特点,非常实用.它的特点还有: 响应 ...

  3. lightslider-支持移动触摸的轻量级jQuery幻灯片插件

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

  4. 【转】Android-Input 触摸设备

    https://source.android.com/devices/input/touch-devices 触摸设备 Android 支持各种触摸屏和触摸板,包括基于触控笔的数字化板. 触摸屏是与显 ...

  5. jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  6. 10大支持移动“触摸操作”的JavaScript框架

    摘要:移动开发行业的发展速度让人目不暇接,也在此大势之下,推出移动网站App成为开发者必经之路,如何让触屏设备 更易使用?如何让网站对触摸手势做出反应并使触摸更友好?所有这一切,皆因JavaScrip ...

  7. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  8. ResponsiveSlides.js最轻量级的幻灯片插件

    摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支 ...

  9. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. C#基础蛋疼到爆的Byte类型表数范围之网兜毛衣见解……

    事实上写这篇对Byte类型表数范围的文章,真的是蛋疼+蛋疼+蛋疼,每每看到Byte表数范围这一块.都对-128如此的陌生与迷茫.操蛋的Byte,操蛋的人生-- 熊孩子出场:Byte 恶作剧结果:表数范 ...

  2. 【laravel5.4】laravel5.4系列之生成_ide_helper.php文件

    在laravle中使用代码自动补全,比较方便开发,于是这边找到了相关的办法 在laravel配置完好的情况下,同时安装好了composer. 进入代码的根目录执行 composer require b ...

  3. TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  4. Spring Data JPA实体详解

    1. Spring Data JPA实体概述 JPA提供了一种简单高效的方式来管理Java对象(POJO)到关系数据库的映射,此类Java对象称为JPA实体或简称实体.实体通常与底层数据库中的单个关系 ...

  5. HDUOJ --2544最短路(基础)

    输入包括多组数据.每组数据第一行是两个整数N.M(N<=100,M<=10000),N表示成都的大街上有几个路口,标号为1的路口是商店所在地,标号为N的路口是赛场所在地,M则表示在成都有几 ...

  6. 《JAVA与模式》之参考资料

    1.书籍 <JHead First 设计模式(中文版)> <JAVA与模式> <大话设计模式> 2.连接地址 http://blog.csdn.net/jason0 ...

  7. duplicate files during packaging of apk

    OSChina Android APP 导入到Android Studio中不能运行,发现一小插曲. 主要实现了开源中国社区 OSC Android 客户端项目源码通过Gradle方式编译 在 And ...

  8. [Android&amp;Java]浅谈设计模式-代码篇:观察者模式Observer

    观察者,就如同一个人,对非常多东西都感兴趣,就好像音乐.电子产品.Game.股票等,这些东西的变化都能引起爱好者们的注意并时刻关注他们.在代码中.我们也有这种一种方式来设计一些好玩的思想来.今天就写个 ...

  9. Python ljust() 方法

    描述 ljust() 方法返回一个原字符串左对齐,并使用指定字符填充至指定长度的新字符串,默认的填充字符为空格.如果指定的长度小于原字符串的长度则返回原字符串. 语法 ljust() 方法语法: S. ...

  10. javascript怎么禁用浏览器后退按钮

    1. <script language="JavaScript">    javascript:window.history.forward(1); </scri ...