純javascript移動優先的幻燈片效果_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:45:01

純javascript移動優先的幻燈片效果_javascript技巧

純javascript移動優先的幻燈片效果_javascript技巧:簡要教程 wallop是一款移動優先的純javascript幻燈片插件。這個幻燈片插件僅4k大小，它的原理僅是為HTML元素添加和移除適當的class來顯示和隱藏它們，至于這些class樣式你可以完全自定義。特點有：移動優先動畫和過渡效果都使用CSS來生成輕量級，僅4

推薦度：

點擊下載本文 文檔為doc格式

導讀純javascript移動優先的幻燈片效果_javascript技巧:簡要教程 wallop是一款移動優先的純javascript幻燈片插件。這個幻燈片插件僅4k大小，它的原理僅是為HTML元素添加和移除適當的class來顯示和隱藏它們，至于這些class樣式你可以完全自定義。特點有：移動優先動畫和過渡效果都使用CSS來生成輕量級，僅4

簡要教程
wallop是一款移動優先的純javascript幻燈片插件。這個幻燈片插件僅4k大小，它的原理僅是為HTML元素添加和移除適當的class來顯示和隱藏它們，至于這些class樣式你可以完全自定義。特點有：
移動優先
動畫和過渡效果都使用CSS來生成
輕量級，僅4k大小
高度靈活性和可擴展性
可自定義事件和API
沒有任何外部依賴

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

HTML結構

該幻燈片的基本HTML結構如下，你可以為第一個幻燈片slide添加.Wallop-item--current class。


 
 …
 …
 …
 …
 …

初始化插件

...

可用動畫類型

該幻燈片可用的過渡動畫類型有：
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