纯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 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery原生的动画效果
Jul 10 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
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
PHP生成静态页
2006/11/25 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
js 省地市级联选择
2010/02/07 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
python中尾递归用法实例详解
2015/04/28 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
函授本科毕业自我鉴定
2013/10/09 职场文书
人事档案接收函
2014/01/12 职场文书
给市场的环保建议书
2014/05/14 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
开除员工通知
2015/04/22 职场文书