jQuery

【jQuery】エフェクトを使用して背景画像を切り替えるプラグインjQuery.BgSwitcher

June 20, 2018
jQuery.BgSwitcher

jQuery.BgSwitcherはimg要素ではなくエフェクトを使用して背景画像を切り替えるプラグイン。jQuery 1.7.x以上が必要です。

Usage

<div class="box">
  <p>Lorem ipsum dolor sit amet.</p>
</div>
$(".box").bgswitcher({
  images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  ... Something Config ...
});

切り替えのループを無効にする場合

$(".box").bgswitcher({
  images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  loop: false
});

Effect Types

  1. fade
  2. blind
  3. clip
  4. slide
  5. drop
  6. hide (No effect)

エフェクトタイプを追加する

$.BgSwitcher.defineEffect("extraSlide", function($el) {
  $el.animate({left: $el.width()}, this.config.duration, this.config.easing);
});

追加したエフェクト名を指定

$(".box").bgswitcher({
  images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  effect: "extraSlide"
});

Calling the Methods

$(".box").bgswitcher("method name");

MIT