纯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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
javascript 闭包详解
Feb 15 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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设计模式 Delegation(委托模式)
2011/06/26 PHP
php UBB 解析实现代码
2011/11/27 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Vue异步加载about组件
2017/10/31 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python下载指定页面上图片的方法
2016/05/12 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
个性发展自我评价
2014/02/11 职场文书
工程管理英文求职信
2014/03/18 职场文书
表彰大会策划方案
2014/05/13 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
费城故事观后感
2015/06/10 职场文书
python如何读取.mtx文件
2021/04/22 Python