纯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）; // 跳转到下一个slideWallop.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}）;

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