简短的教程

她是一个移动的第一个纯Javaｓｃｒｉｐｔ幻灯片幻灯片插件是4K大小的插件。其原理是为HTML元素添加和移除适当的类来显示和隐藏它们。对于这些类样式，您可以完全自定义它们：

移动优先

动画和转换效果是使用CSS生成的。

轻量级的，只有4K大小

高灵活性和可扩展性

可定制事件和api

没有外在的依赖。


使用方法

幻灯片的插件的使用需要引进wallop.css和Wallop.min.js的档案。








HTML结构

幻灯片的基本的HTML结构如下，你可以add.wallop-item--current为第一滑类。






…
…
…
…
…

以前的
下一个




初始化插件



无功wallopel = document.queryselector（冲击力。）；
VaR滑块=新的冲击（wallopel）；




添加动画效果

幻灯片插件默认没有动画转换效果。如果你需要添加动画效果，你需要引入相应的wallop-animation.css文件和添加冲击力——XXXX类的元素。例如，添加效果的淡入和淡出：









…




可用的动画类型

幻灯片可用的转换动画类型是：

冲击力-滑

冲击力——褪色

冲击力的尺度

冲击力——旋转

冲击力倍

冲击力的垂直滑动

以上是一些内置的过渡动画，您还可以自定义自己的转换动画。

配置参数

下面是一些可用的配置参数：

ButtonPreviousClass：'wallop-buttonprevious

ButtonNextClass：'wallop-buttonnext

ItemClass：'wallop-item

CurrentItemClass：'wallop-item --电流

ShowPreviousClass：'wallop-item -- showprevious

ShowNextClass：'wallop-item -- shownext

HidePreviousClass：'wallop-item -- hideprevious

HideNextClass：'wallop-item -- hidenext

旋转木马：真

方法

冲击力的幻灯片插件提供控制按钮的一些基本方法：

以

允许跳转到指定索引的幻灯片。




VaR滑块= document.queryselector（冲击力。）；
Var Wallop =新的冲击力（滑块）；

跳转到第二个幻灯片（索引从0开始）
Wallop，（1）；



下一个

跳转到下一个幻灯片。




VaR滑块= document.queryselector（冲击力。）；
Var Wallop =新的冲击力（滑块）；

跳转到下一个幻灯片
Wallop.next（）；



以前的

跳到前滑滑梯。




VaR滑块= document.queryselector（冲击力。）；
Var Wallop =新的冲击力（滑块）；

跳转到上一个幻灯片
Wallop.previous（）；


事件

她发出的每一个幻灯片变化的事件，它返回一个细节包含指数和冲击力对当前幻灯片对象。




VaR滑块= document.queryselector（冲击力。）；
Var Wallop =新的冲击力（滑块）；

Wallop.on（‘变'，功能（事件）{
/ / event.detail.wallopel
…

/ / event.detail.currentitemindex
>数字
}）；



以上是分享纯javaｓｃｒｉｐｔ移动首幻灯片效果制作过程，希望能帮您制作更漂亮的幻灯片效果。