指定した背景画像をx秒毎に切り替えるjQueryプラグイン
某日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のオプションとかほんとはいらないんだけど、解りやすくしようとしたらオプションがどんどん増えていった。
ツッコミやバグ報告はバンバンっ受付中です。
それをするならば指定したclassをx秒毎に切り替えるjQueryプラグインの方が良いンじゃないだろうか…と言ってみる。
junerさん、初めまして。
コメントありがとうございます。
今回のプラグインは、画像のプリロードとフェードアウトをなるべく楽に使えるようしたかったので、画像のパスを指定するだけで背景が切り替わる仕様にしました。
フェードアウトは完全に思い付きなので、かなり無理やりですけど＞＜
ご提示いただいた “指定したclassをx秒毎に切り替えるjQueryプラグイン” の方は、CSSである程度出来るのでユーザー層をあまり選ばず、自由度も高そうな感じはしますね。
JavaScriptはまだまだ勉強中なので、参考にさせていただきます :)
プログラミング素人です。
このプラグインで実行している画像切り替えの繰り返しを、
止める方法を教えてください。
momoさん、初めまして。
切り替えの繰り返しを止めたい場合は、
loopExecオプションにfalseを設定します。
$(expr).bgSwitcher({ loopExec: false });早速ご回答頂ありがとうございます。
loopExec : false
で繰り返しが止まりましたが、お尋ねしたかった事と違いがありました。
私の質問の仕方が悪くて申し訳ありませんでした。
改めて質問させてください。
ボタンを用意しそれをクリックして、スタート、ストップ、またスタートと、背景切り替えのアニメーションを制御したいと思っています。
どのように記述すればよいでしょうか？
申し訳ないですが、本プラグインはスタート、ストップのような機能は対応していません。
また、本プラグインは背景画像を切り替える事を目的としているため、基本的には対応する予定もありません。
ただ、利用シーンによっては(imgが使えない状況など)対応を検討したいと思います。
よろしければ、どのような状況で利用されるのかお教え頂けないでしょうか。
ご回答頂、ありがとうございました。
素人質問で、大切なコメント欄を汚してしまいましてすみませんでした。
ボタンクリックで背景画像の切り替えをループさせて、ストップボタンでループを一時停止させるということを実現したかったのです。
機会がありましたらこちらのプラグインも使わせていただきたいと思います。
お役に立てず、申し訳なく思います。
いずれにせよ、プラグイン自体を作り直す予定ですので、
その際にストップ＆スタートの対応も検討させて頂きます。
fadeOut : true
を入れると、画像切り替えも全てダメになってしまうのですが、どうしたら良いでしょうか・・・？
詳しい状況が解らないので何とも言えませんが、
フェードアウト切り替えはposition: absoluteで要素のコピーを被せているので、CSSのposition周りで影響が出ているかもしれません。
通常の切り替えは正常に動作していますか？
ありがとうございます。
// <![CDATA[
jQuery(document).ready(function($)
{
// 画像を順番に指定する例
$('div#copy').bgSwitcher({
bgImages : [
'img/top-img1.jpg',
'img/top-img2.jpg',
],
interval : 2000,
fadeOut : true
});
});
fadeOut : true
を削除すると、正常に動作します。
よろしくお願いします！
すいません、jQueryのバージョンが低かったせいかもしれません。ただ、バージョンをあげたらfirefoxで落ちるようになってしまいました。
いろいろ考慮した結果、flashで作成する事にしました。
失礼いたしました！
こんなプラグインあったなんて！
素晴らしいですね。
ちょっと、jQueryの仕様的に無理かもしれませんが、
htmlやbody要素を指定して、フェードをtrueにしてしまうとダメっぽいですね。
b2iさん、こんにちは。
> 素晴らしいですね。
実験的で少し古いプラグインですが、そう言っていただけるとありがたいです :)
> htmlやbody要素を指定して、フェードをtrueにしてしまうとダメっぽいですね。
次期バージョンでは出来る限り対応したいと思います。
よろしくお願いします！
もう一年も前になりますが、あの時はありがとうございました。
そして、今回フェードVerを使わせてもらいました。
たびたび、ありがとうございます。
今回使ったケースがレアかもしれませんが、背景の位置をセンターで配置している場合に、ウィンドウサイズを変更すると切り替え時に変更した分だけ横にぶれるような感じになってしまう現象がありました。
JS確認したところ、75行目の left: pos.left があやしかったのでここを取ってみたら、問題なく動作しました。
一応ご連絡です。
かなり放置気味のライブラリですが、お役に立ててなによりです。
ご報告いただいた不具合につきましては、次回バージョンアップ時に対応したいと思います。
ご報告ありがとうございました :)
初めまして。
便利なものがある！と喜んでいたのですが、
safariでなぜか指定したidの内容が丸ごとズレてスライドします。（テキストも）
それとは別で、指定した位置にフェード無しで画像が切り替わります。
はじめまして。
フラッシュが、できないので、どうしたものかと思っていました。
こんな便利なのがあるなんて。
早速、自サイトに組み込んで、試してみたいと思います。
ずいぶん以前のスクリプトについてで恐縮なんですが、
画象をphpで動的に指定しています。
FF3ではちゃんと動いてるんですが、IE6だと「最初の画象」が正しく認識されず、背景を指定している要素の背景色がまず表示され、その後背景画像の切り替えがはじまります。
動きとしては、最初の一枚目の画象をあらかじめ指定しない場合と同じです。
これはなんとかならないものでしょうか？
１週目のインターバルだけ０にするとか？？
JatHatmakerさん、初めまして。
ご質問いただいた内容だけでは、状況がつかみ辛いので、
再現するコードをご提示いただけるとありがたいです。