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

<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
});

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"
});

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

MIT

• Tag
• jQuery
• Slider