簡要教程
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);
// 跳轉到下一個slide
Wallop.next();
previous
跳轉到前一個幻燈片slide。
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳轉到前一個slide
Wallop.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移動優先的幻燈片效果制作過程，希望可以幫助大家制作更精美的幻燈片效果。
- 上一頁:js實現文件上傳表單域美化特效
- 下一頁:JS實現點擊按鈕獲取頁面高度的方法