纯javascript移动优先的幻灯片效果
简要教程
wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小，它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们，至于这些class样式你可以完全自定义。特点有：
移动优先
动画和过渡效果都使用CSS来生成
轻量级，仅4k大小
高度灵活性和可扩展性
可自定义事件和API
没有任何外部依赖
使用方法
使用该幻灯片插件首先需要引入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移动优先的幻灯片效果制作过程，希望可以帮助大家制作更精美的幻灯片效果。
相关文章
遍历所有样式属性，通过判断其属性值，是否为'undefined' 或特特的值，来过虑属性2012-09-09
这篇文章主要给大家介绍了JS基本遍历方法,for，for...in,for...of,文章通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2023-09-09
本文介绍了如何自定义trim方法，trim的作用就是去除字符串前后空格,这个方法在字符串处理方面很有实用价值，需要的朋友可以参考下2015-07-07
这篇文章主要介绍了js设置文字颜色的方法,涉及JS页面元素样式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-12-12
在日常工作中，我们经常需要对数组对象进行排序，尤其是在处理数据可视化需求中。本文将介绍一些简单而又实用的方法，帮助你实现对数组对象的某几个 key 进行排序2023-05-05
JavaScript+html5 canvas制作的圆中圆效果实例
这篇文章主要介绍了JavaScript+html5 canvas制作的圆中圆效果,结合完整实例形式分析了基于JavaScript与html5 canvas技术实现的图形绘制与颜色随机填充技巧,需要的朋友可以参考下2016-01-01
作为一个程序员，代码实现才是能力体现，在大部分面试的时候，我们都会被要求手写代码实现一个功能，本文总结了一下经常被面试官问到的节流和防抖功能的实现，分享给有需要的小伙伴2023-07-07
关于IE中getElementsByClassName不能用的问题解决方法
今天使用getElementsByClassName写了段小程序，在IE6、8中测试的时候就出现问题了，浏览器报错，经搜索找到了一个比较好的方法，是个老外写的一个方法2013-08-08
这篇文章主要介绍了JS实现前端路由功能,结合实例形式分析了js实现原生路由的相关原理与操作技巧,需要的朋友可以参考下2020-05-05
用JavaScript绘图 ——JS2D函数集...2007-01-01
最新评论