纯javascript移动优先的幻灯片效果(js移动dom)

推荐整理分享纯javascript移动优先的幻灯片效果(js移动dom)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js实现元素移动,javascript移动开发,js 移动元素,js移动端布局,js实现物体移动,js移动dom,js移动dom,js 移动元素,内容如对您有帮助，希望把文章链接给更多的朋友！

简要教程wallop是一款移动优先的纯javascript幻灯片插件。这个幻灯片插件仅4k大小，它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们，至于这些class样式你可以完全自定义。特点有：移动优先动画和过渡效果都使用CSS来生成轻量级，仅4k大小高度灵活性和可扩展性可自定义事件和API没有任何外部依赖

使用方法使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件。

HTML结构

该幻灯片的基本HTML结构如下，你可以为第一个幻灯片slide添加.Wallop-item--current class。

初始化插件

添加动画效果

该幻灯片插件默认是没有动画过渡效果的，如果你需要添加动画效果，需要引入相应的wallop-animation.css文件，并为元素添加Wallop--xxxx class。例如要添加淡入淡出的效果：

可用动画类型

该幻灯片可用的过渡动画类型有：Wallop--slideWallop--fadeWallop--scaleWallop--rotateWallop--foldWallop--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的幻灯片上。

next

跳转到下一个幻灯片slide。

previous

跳转到前一个幻灯片slide。

事件Wallop在每一次slide改变的时候都会发出一个事件，它返回一个detail对象，该对象包含当前slide的index和Wallop对象。