Rewish

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

Search

Entry Search

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

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

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

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

目次

概要

指定した背景画像を、指定した秒数毎にフェードアウトで切り替えるjQueryプラグイン。

ライセンス

MIT License

主な機能

  • シンプルな背景切り替え
  • フェードアウト切り替え
  • 切り替えの制御(開始/停止/リセット)
  • ファイル名の連番自動読み込み
  • 画像のプリロード

ダウンロード

jquery.bgSwitcher-min.js - 0.3.3-beta

開発版はGitHubに置いています。

デモ

jQuery.bgSwitcherのデモ

使用方法

JSファイルの読み込み

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

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

もっとも単純な指定

以下の例では、image1.jpg～image3.jpgを2秒毎にフェードアウトで切り替えます。

jQuery(function($) {
	$('#example').bgSwitcher({
		images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
		interval: 2000
	});
});

連番画像の自動読み込み

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

/**
 * image1.jpg ～ image5.jpg の画像がある場合
 */
jQuery(function($) {
	// imagesで指定する配列を
	// [ベースになるパス, 開始番, 終了番]
	// のように指定する
	$('#example').bgSwitcher({
		images: ['image.jpg', 1, 5]
	});
});

オプション

オプション名 説明 初期値
images 配列で画像のパスを指定。連番画像を自動で読み込むことも可能。
詳しくは使用方法を参照。 		null
interval 画像を切り替える時間を1/1000秒で指定。 5000 (5秒)
autoStart 自動で切り替えを開始するかどうか。 true
duration フェードアウトする秒数。0で無効。 1000
easing エフェクトの動き linear
loop 切り替え処理を繰り返すかどうか。 true
random 指定した画像をランダムに切り替えるかどうか。 false
resize Windowサイズの変更を監視するかどうか。 false
switchHandler 切り換えを行う関数

切り替えの制御

まずbgSwitcherのインスタンスをjQuery().data('bgSwitcher')で取得します。

// #exampleにbgSwitcherを適用した場合
var ctrl = jQuery('#example').bgSwitcher().data('bgSwitcher');

取得したインスタンスのメソッドをコールして、背景画像の切り替えを制御できます。

// 切り替えを開始
ctrl.start();
// 切り替えを停止
ctrl.stop();
// 開始していたら停止、停止していたら開始
ctrl.toggle();
// 一番最初の画像に戻す
ctrl.reset();

ボタンのclickに割り当てたりすると便利かも知れません。

jQuery(function($) {
	var node = $('#example').bgSwitcher();
	var ctrl = node.data('bgSwitcher');
	$('#startButton').click(function() {
		ctrl.start();
	});
	$('#stopButton').click(function() {
		ctrl.stop();
	});
	$('#toggleButton').click(function() {
		ctrl.toggle();
	});
	$('#resetButton').click(function() {
		ctrl.reset();
	});
});

更新履歴

2011-07-22 - v0.3.3
リサイズイベントでオフセット値を再セットするように変更
2011-07-21 - v0.3.2
  • typoに起因するバグの修正
  • resizeイベントの設定位置を変更
2011-07-20 - v0.3.1
resizeオプションをデフォルトtrueに変更
2011-05-06 - v0.3.0
オプション追加/変更
2011-04-07 - v0.2.7
インスタンスメソッドの制限を解除
2011-03-05 - v0.2.6
bugfix
2011-02-01 - v0.2.5
bugfix
2010-12-09 - v0.2.4
loop: falseで最初の画像に戻ってから止まる問題を修正
2010-11-22 - v0.2.3
random指定時に初期画像もランダムで決定するようにした
2010-11-01 - v0.2.2
Windowのサイズ変更を監視するオプション(resize)を追加
2010-10-29 - v0.2.1
IEで動かないバグを修正
2010-10-26 - v0.2.0
バージョン0.2系を公開
2009-04-08 - v0.1.0
公開