幻灯片/轮播
wallop - 纯javascript幻灯片插件
PetitQ
wallop 是一款移动优先的纯 javascript 幻灯片插件。这个幻灯片插件仅 4k 大小，它的原理仅是为 HTML 元素添加和移除适当的 class 来显示和隐藏它们，至于这些 class 样式你可以完全自定义。wallop 的特点有：
移动优先
也想出现在这里？联系我们吧
动画和过渡效果都使用 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);
// 跳转到前一个slideWallop.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});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
