ホームページ > 記事 > ウェブフロントエンド > 純粋な JavaScript モバイルファースト スライドショーの効果_JavaScript スキル
純粋な JavaScript モバイルファースト スライドショーの効果_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:34:091537ブラウズ
簡単なチュートリアル
Wallop は、モバイルファーストの純粋な JavaScript スライドショー プラグインです。このスライドショー プラグインのサイズはわずか 4K で、その原理は HTML 要素に適切なクラスを追加および削除するだけで、これらのクラス スタイルを完全にカスタマイズできます。機能は次のとおりです:
モバイルファースト
アニメーションとトランジションの効果は 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 構造は次のとおりです。最初のスライドに .Wallop-item--current クラスを追加できます。
<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 クラスを追加する必要があります。たとえば、フェード効果を追加するには:
<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--vertical-slide
上記はいくつかの組み込みのトランジション アニメーション タイプですが、独自のトランジション アニメーションをカスタマイズすることもできます。
設定パラメータ
利用可能な構成パラメータをいくつか示します:
buttonPreviousClass: 'Wallop-buttonPrevious'
buttonNextClass: 'Wallop-buttonNext'
itemClass: 'ワロップアイテム'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
HidePreviousClass: 'Wallop-item--hidePrevious'
HideNextClass: 'Wallop-item--hideNext'
カルーセル: true
メソッド
Wallop スライドショー プラグインは、ボタン コントロールの基本的なメソッドをいくつか提供します:
goTo
指定したインデックスのスライドにジャンプできます。
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);
次
次のスライドにジャンプします。
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到下一个slide
Wallop.next();
前
前のスライドにジャンプします。
var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
// 跳转到前一个slide
Wallop.previous();
イベント
Wallop はスライドが変更されるたびにイベントを発行し、現在のスライドのインデックスと 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 モバイルファーストのスライドショー効果作成プロセスです。より美しいスライドショー効果を作成するのに役立つことを願っています。