jQueryで作るFlashみたいにフェードインフェードアウトするバナー
Flashみたいに、何枚かの写真をランダムにフェードインフェードアウトしながら表示するバナーを作ってみた。
一応、jQueryのプラグイン形式で（プラグインの作り方はてきとう！）。
画像パスと、リンク先URLをリストでプラグインに渡せば、リストをシャッフルして（最初の1回だけ）順に表示する。５秒置き（初期値）にフェードインフェードアウトしながらパラパラと画像が変わる。
これでiPhoneでもバナーがクリックできる！
一応プラグイン形式のソース
/**
* jQuery Shuffle Bannar plugin
* Copyright (C) cubdesign | http://www.cubdesign.com/
* Dual licensed under the MIT <http://www.opensource.org/licenses/mit-license.php>
* and GPL <http://www.opensource.org/licenses/gpl-license.php> licenses.
* Date: 2010-02-26
* @author Takeo Tamura
* @version 0.5.0
*/
(function($) {
var name_space = 'shuffleBannar';
$.fn[name_space] = function(options) {
var elements = this;
var settings = $.extend({
'bannarList' : [],
'interval':5000,
'fadeOutTime' : 1000,
'fadeInTime' : 1000
}, options);
var addData = function (v) {
$.data(v, name_space, {});
return $(v);
};
/*
* シャッフルする
*/
var shuffle = function (targetArray) {
var i = targetArray.length;
while (i) {
var j = Math.floor(Math.random() * i);
var x = targetArray[--i];
targetArray[i] = targetArray[j];
targetArray[j] = x;
}
return targetArray;
};
//キャッシュ防止用
var nocache = new Date().getTime();
var bannarList = settings.bannarList;
//シャッフル
bannarList = shuffle(settings.bannarList);
//今表示しているバナーの番号
var currentBannarNumber = -1;
//インターバルID
var iId = -1;
/*
* バナーを変更する
*/
var changeBannarImage = function () {
clearInterval(iId);
$("#shuffleBannar img:first").fadeOut(settings.fadeOutTime,function(){
$(this).remove();
loadBannarImage();
});
};
/*
* バナーを読み込む
*/
var loadBannarImage = function () {
currentBannarNumber++;
if( currentBannarNumber == bannarList.length ){
currentBannarNumber = 0;
}
var targetBannar = bannarList[ currentBannarNumber ];
var imageURL = "" + targetBannar.image + "?nocache="+nocache;
var linkURL = "" + targetBannar.link;
var img = new Image();
$(img).load(function(){
$(this).hide();
$("#shuffleBannar").append(this);
$(this).fadeIn(settings.fadeInTime);
$(this).click(function(){location.href=linkURL;});
iId = setInterval(changeBannarImage,settings.interval)
}).attr('src', imageURL)
};
elements.each(function() {
addData( this );
loadBannarImage();
});
//method chain
return this;
};
})(jQuery);
