エフェクト付きスライドショー (3)

slideObj = new Object();
slideObj.list = new Array();
slideObj.time = 4000; // 表示時間(ミリ秒)
slideObj.fadetime = 2000; //フェードイン時間(ミリ秒)
slideObj.path = "images/"; // 画像のあるパス
slideObj.checkFile = function() {
var url = "filelist.cgi?dirName=images&cache="+(new Date()).getTime();
new Ajax.Request(url, { method: "get", onComplete:slideObj.getFilelist });
}
slideObj.getFilelist = function(httpObj) {
var LF = String.fromCharCode(10);
slideObj.list = httpObj.responseText.split(LF);
slideObj.list.pop(); // 余計な改行をカット
slideObj.count = 0;
slideObj.slideShow();
}
slideObj.slideShow = function() {
new Effect.Appear("slide");
new Effect.Fade("slide", { from:0, to:1 });
$("slide").src = slideObj.path + slideObj.list[slideObj.count++];
if (slideObj.count >= slideObj.list.length) slideObj.count = 0;
setTimeout("slideObj.slideShowFadeOut()", slideObj.time);
}
slideObj.slideShowFadeOut = function() {
new Effect.Fade("slide", { from:1, to:0 });
setTimeout("slideObj.slideShow()", slideObj.fadetime);
}
window.onload = slideObj.checkFile;
・サンプルを実行
・サンプルをダウンロード
Ajax実践テクニック 説明などは本書を参考にしてください。JavaScript以外のソースはデータをダウンロードするか本書を参照してください。