纯javascript移动优先的幻灯片效果


Posted in Javascript onNovember 02, 2015

简要教程
wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小,它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们,至于这些class样式你可以完全自定义。特点有:
移动优先
动画和过渡效果都使用CSS来生成
轻量级,仅4k大小
高度灵活性和可扩展性
可自定义事件和API
没有任何外部依赖
          

纯javascript移动优先的幻灯片效果  

使用方法
使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。

<link rel="stylesheet" href="path/to/wallop.css">
<script src="path/to/Wallop.min.js"></script>

HTML结构

该幻灯片的基本HTML结构如下,你可以为第一个幻灯片slide添加.Wallop-item--current class。

<div class="Wallop">
 <div class="Wallop-list">
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
 </div>
 <button class="Wallop-buttonPrevious">Previous</button>
 <button class="Wallop-buttonNext">Next</button>
</div>

 初始化插件

<script>
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
</script>

 添加动画效果

该幻灯片插件默认是没有动画过渡效果的,如果你需要添加动画效果,需要引入相应的wallop-animation.css文件,并为元素添加Wallop--xxxx class。例如要添加淡入淡出的效果:

<head>
 <link rel="stylesheet" href="path/to/wallop.css">
 <link rel="stylesheet" href="path/to/wallop-fade.css">
</head>        
<div class="Wallop Wallop--fade">
...
</div>

 可用动画类型

该幻灯片可用的过渡动画类型有:
Wallop--slide
Wallop--fade
Wallop--scale
Wallop--rotate
Wallop--fold
Wallop--vertical-slide

上面是一些内置的过渡动画类型,你也可以自定义自己的过渡动画。
 配置参数
下面是一些可用的配置参数:
buttonPreviousClass: 'Wallop-buttonPrevious'
buttonNextClass: 'Wallop-buttonNext'
itemClass: 'Wallop-item'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
hidePreviousClass: 'Wallop-item--hidePrevious'
hideNextClass: 'Wallop-item--hideNext'
carousel: true
 方法
Wallop幻灯片插件提供了一些基本的方法用于按钮的控制:
goTo

允许跳转到指定index的幻灯片上。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到第二个slide(index从0开始)
Wallop.goTo(1);

next

跳转到下一个幻灯片slide。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到下一个slide
Wallop.next();

previous

跳转到前一个幻灯片slide。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到前一个slide
Wallop.previous();

 事件
Wallop在每一次slide改变的时候都会发出一个事件,它返回一个detail对象,该对象包含当前slide的index和Wallop对象。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
Wallop.on('change', function(event) {
 // event.detail.wallopEl
 // => <div class="Wallop">…</div>
 
 // event.detail.currentItemIndex
 // => number
});

以上就是为大家分享的纯javascript移动优先的幻灯片效果制作过程,希望可以帮助大家制作更精美的幻灯片效果。

Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JS实现点击按钮获取页面高度的方法
Nov 02 #Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 #Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 #Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 #Javascript
You might like
第二节--PHP5 的对象模型
2006/11/16 PHP
php创建无限级树型菜单
2015/11/05 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
js实现随机点名小功能
2017/08/17 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
使用python实现生成用户信息
2017/03/20 Python
pygame实现飞机大战
2020/03/11 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
公司清洁工岗位职责
2013/12/14 职场文书
银行实习生的自我评价
2014/01/13 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
安全保证书范文
2014/04/29 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
党员三严三实心得体会
2014/10/13 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
地震捐款简报
2015/07/21 职场文书