img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。

2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。

ダウンロード

jquery.bgswitcher.js

開発リポジトリはrewish/jquery-bgswitcher · GitHub

依存ライブラリ

jQuery 1.7.x以上が必要です。

ライセンス

MIT License

主な機能

• エフェクト付きの背景切り替え
• 切り替えの制御（開始/停止/リセット）
• ファイル名の連番自動読み込み
• 画像のプリロード

デモ

Demo - jQuery.BgSwitcher

使用方法

<div class="box">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

$(".box").bgswitcher({
  images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  ... その他の設定 ...
});

設定

エフェクトの種類

組み込みのエフェクト

• fade
• blind
• clip
• slide
• drop
• hide（エフェクト無し）

エフェクトを追加する

まず、$.BgSwitcher.switchHandlersにエフェクト関数を追加します。

// 第一引数でエフェクト用の要素を受け取れます。
$.BgSwitcher.switchHandlers.extraSlide = function($el) {
  $el.animate({right: -$el.width()}, this.config.duration, this.config.easing);
};

つぎに、追加したエフェクト名を指定します。

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

メソッドの呼び出し

jQuery UI Widgetライクのメソッドコールをサポートしています。

$(".box").bgswitcher("メソッド名");

上記の方法で様々なメソッドをコールすることができます。

サポート情報

不具合の報告や要望はIssuesにお願いします。