純javascript移動(dòng)優(yōu)先的幻燈片效果_javascript技巧

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:45:01

純javascript移動(dòng)優(yōu)先的幻燈片效果_javascript技巧

純javascript移動(dòng)優(yōu)先的幻燈片效果_javascript技巧:簡(jiǎn)要教程 wallop是一款移動(dòng)優(yōu)先的純javascript幻燈片插件。這個(gè)幻燈片插件僅4k大小，它的原理僅是為HTML元素添加和移除適當(dāng)?shù)腸lass來(lái)顯示和隱藏它們，至于這些class樣式你可以完全自定義。特點(diǎn)有：移動(dòng)優(yōu)先動(dòng)畫和過渡效果都使用CSS來(lái)生成輕量級(jí)，僅4

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀純javascript移動(dòng)優(yōu)先的幻燈片效果_javascript技巧:簡(jiǎn)要教程 wallop是一款移動(dòng)優(yōu)先的純javascript幻燈片插件。這個(gè)幻燈片插件僅4k大小，它的原理僅是為HTML元素添加和移除適當(dāng)?shù)腸lass來(lái)顯示和隱藏它們，至于這些class樣式你可以完全自定義。特點(diǎn)有：移動(dòng)優(yōu)先動(dòng)畫和過渡效果都使用CSS來(lái)生成輕量級(jí)，僅4

簡(jiǎn)要教程
wallop是一款移動(dòng)優(yōu)先的純javascript幻燈片插件。這個(gè)幻燈片插件僅4k大小，它的原理僅是為HTML元素添加和移除適當(dāng)?shù)腸lass來(lái)顯示和隱藏它們，至于這些class樣式你可以完全自定義。特點(diǎn)有：
移動(dòng)優(yōu)先
動(dòng)畫和過渡效果都使用CSS來(lái)生成
輕量級(jí)，僅4k大小
高度靈活性和可擴(kuò)展性
可自定義事件和API
沒有任何外部依賴

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

HTML結(jié)構(gòu)

該幻燈片的基本HTML結(jié)構(gòu)如下，你可以為第一個(gè)幻燈片slide添加.Wallop-item--current class。


 
 …
 …
 …
 …
 …

初始化插件




 
 
 

...
 


 可用動(dòng)畫類型
該幻燈片可用的過渡動(dòng)畫類型有：

Wallop--slide

Wallop--fade

Wallop--scale

Wallop--rotate

Wallop--fold

Wallop--vertical-slide

上面是一些內(nèi)置的過渡動(dòng)畫類型，你也可以自定義自己的過渡動(dòng)畫。

 配置參數(shù)

下面是一些可用的配置參數(shù)：

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
允許跳轉(zhuǎn)到指定index的幻燈片上。





next
跳轉(zhuǎn)到下一個(gè)幻燈片slide。





previous
跳轉(zhuǎn)到前一個(gè)幻燈片slide。





 事件

Wallop在每一次slide改變的時(shí)候都會(huì)發(fā)出一個(gè)事件，它返回一個(gè)detail對(duì)象，該對(duì)象包含當(dāng)前slide的index和Wallop對(duì)象。





聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com