快捷導(dǎo)航

純javascript移動優(yōu)先的幻燈片效果

更新時間：2015年11月02日 11:18:18 投稿：lijiao

這篇文章主要介紹了純javascript實現(xiàn)移動優(yōu)先的幻燈片效果，感興趣的小伙伴們可以參考一下

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

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

<link rel="stylesheet" href="path/to/wallop.css">
<script src="path/to/Wallop.min.js"></script>

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

該幻燈片的基本HTML結(jié)構(gòu)如下，你可以為第一個幻燈片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>

添加動畫效果

該幻燈片插件默認(rèn)是沒有動畫過渡效果的，如果你需要添加動畫效果，需要引入相應(yīng)的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
上面是一些內(nèi)置的過渡動畫類型，你也可以自定義自己的過渡動畫。
配置參數(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的幻燈片上。

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳轉(zhuǎn)到第二個slide（index從0開始）
Wallop.goTo(1);

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳轉(zhuǎn)到下一個slide
Wallop.next();

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳轉(zhuǎn)到前一個slide
Wallop.previous();

事件
Wallop在每一次slide改變的時候都會發(fā)出一個事件，它返回一個detail對象，該對象包含當(dāng)前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移動優(yōu)先的幻燈片效果制作過程，希望可以幫助大家制作更精美的幻燈片效果。

您可能感興趣的文章: