jQueryを使ってスライドショーみたいな〜

2012-06-06 簡易版をこちらに移転しました
サンプルはこちら→W7工廠分室|トップページ
HTML

<div class="slideShow"></div>

JavaScript (jq_slideShow.js)

/* jq_slideShow.js 2010-9-11 */
function slideShow(){
	var t=5000;               //表示時間
	var c=300;                //切替時間
	var d="./jstester/img/";  //htmlからの画像場所
	var m=false;               //true:ファイル名,false:連番
	var n=["cat01.jpg","cat02.jpg","cat03.jpg"];  //ファイル名
	var r=["cat0",1,3,".jpg"];                    //連番

	$('div.slideShow').append("<img class=\"slideShowImg\"/>");
	var s;var e;
	if(m){s=0;e=n.length;}else{s=r[1];e=r[2]+1;}
	main(s);
	function main(i){
		var f;
		if(m){f=n[i];}else{f=r[0]+i+r[r.length-1];}//ファイル名取得
		$('img.slideShowImg').attr('src',d+f).fadeIn(c/2);//画像入替
		if(i<e){
			setTimeout(function(){//fadeOut後main再帰
				$('img.slideShowImg').fadeOut(c/2);
				setTimeout(function(){main(i+1);},c/2);
			},t);
		}else{main(s);}//リピート
	}
}
$(document).ready(function(){slideShow();});

---

簡易版
HTML
※imgには最初に表示される画像をsrcに記述しておくこと

<img class="slideShowMin" src="***"/>

JavaScript (jq_slideShowMin.js)

/* jq_slideShowMin.js 2010-9-11 */
function slideShowMin(){
	//変更可能箇所：ディレクトリ名・ファイル名・表示時間
	var d="./jstester/img/";
	var n=["cat01.jpg","cat02.jpg","cat03.jpg"];
	var t=5000;

	main(0);
	function main(i){
		$('img.slideShowMin').attr('src',d+n[i]).fadeOut(10).fadeIn(400);
		if(i<n.length-1){i=i+1;}else{i=0;}
		setTimeout(function(){main(i);},t);
	}	
}
$(document).ready(function(){slideShowMin();});