Rewish

ウェブデザイン、HTML、CSS、JavaScript、PHP、WordPress、Movable Typeなど、Web制作で役立つかも知れないBlog.

指定した背景画像をx秒毎に切り替えるjQueryプラグイン

カテゴリー
JavaScript
タグ
Download, jQuery, Plugin

某日Twitterにて、"img要素じゃなくて背景を入れ替えるプラグインを探している"と言う旨のタイムラインが流れていたので、実験的に書いてみたスクリプトのプラグイン版。

その時書いたスクリプトはプラグインですら無くて、凄く使いにくいモノだったので、より簡単に使えるようにプラグイン化してみました。習作。習作。

概要

背景画像を指定秒数毎に指定順(または連番)で切り替えます。

機能概要

  • シンプルな背景切り替え
  • フェードアウト切り替え
  • 切り替え繰り返しの制御
  • 画像のプリロード
  • ファイル名の連番自動読み込み

ダウンロード・デモ

無理やり感タップリなのでbeta公開。ライセンスはMIT ライセンス。

jquery.bgSwitcher.js - v0.1b

デモを見る

導入方法

JSファイルの読み込み

jQueryはver1.3.2以上の使用を推奨します。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.bgSwitcher.js"></script>

前提事項

基本的にはbackground-imageプロパティの値を書き換えるだけなので、まずCSSで背景を指定しておいた方が無難です。

基本的な指定例

以下の例の場合だと、背景画像は2秒毎にパッパッと切り替わります。

jQuery(document).ready(function($)
{
	// 画像を順番に指定する例
	$('div#example').bgSwitcher({
		bgImages : [
			'image1.jpg',
			'image2.jpg',
			'image3.jpg'
		],
		interval : 2000
	});
});

画像のファイル名に数字を連番で付けている場合、以下のように指定すると自動で連番画像を読み込みます。(拡張子は何でもOK)

jQuery(document).ready(function($)
{
	// image1.jpg ～ image5.jpg の画像がある場合、
	// 以下の指定でimage[連番].jpg と言う風に自動で読み込む
	$('div#example').bgSwitcher({
		bgImages : ['image.jpg'], // 連番抜きのパスを配列で1つ指定
		sequence : true,
		seqFirst : 1,
		seqLast  : 5,
		fadeOut  : true,
		startNum : 2
	});
});

オプションとコールバック関数

jQuery(elements).bgSwitcher({
    オプション名: 設定値,
    オプション名: 設定値,
    オプション名: 設定値
}, callback);

オプション

第一引数で以下のオプションを指定できます。

オプション名 設定値の説明と例 初期値
bgImages 配列で画像のパスを指定。基本的には指定順で切り替える。
例) bgImages : ['画像のパス', '画像のパス'] 		null
interval 画像を切り替える時間。(1/1000秒)
例) interval : 10000 // 10秒 		5000
loopExec 切り替え処理を繰り返すかどうか。(true | false)
例) loopExec : false 		true
fadeOut フェードアウト切り替えを使うかどうか。(true | false)
例) fadeOut : true 		false
fadeSpeed フェードアウト切り替えのフェードスピード。(1/1000秒)
例) fadeSpeed : 1000 // 1秒 		1000
sequence 連番自動読み込みを使用するかどうか。(true | false)
例) sequence : true 		false
seqFirst 連番自動読み込みの最初の番号。
例) seqFirst : 1 		1
seqLast 連番自動読み込みの最後の番号。
例) seqLast : 5 		5
startNum 切り替えを開始する画像の順番。
例) startNum : 2 // 2番目に指定した画像から開始 		1

コールバック関数

第二引数でコールバック関数を指定できます。

コールバック関数の引数で以下のデータを受け取れます。

第一引数
対象要素のjQuery Object
第二引数
切り替える背景のパス
第三引数 (fadeOutオプションがtrueの場合のみ)
対象要素のjQuery Object の クローン

具体的にはこんな感じ。

	$('div#example').bgSwitcher({}, function(elem, bg, clone)
	{
		elem.css('background-image', 'url('+ bg +')');
	});

一応用意したけど使いにくいかも。

最後に

フェードアウト効果を持たせて背景を切り替える方法が思い付かなかったので、クローンを重ねてフェードアウト切り替えを実現しています。なので、若干挙動がおかしなところもあります。

値がboolのオプションとかほんとはいらないんだけど、解りやすくしようとしたらオプションがどんどん増えていった。

ツッコミやバグ報告はバンバンっ受付中です。