ブログ

ひっさしぶりのブログ更新です。

仕事でTOPページのメインビジュアルをjQueryで作成する必要があったので、自身の備忘録としてエントリーします。

クライアント様のご要望は

• iPhoneやiPadでも閲覧できるようにしたい（jQueryがいいってことだよね）
• ストーリーをもたせたスライドショーにしたい（要は最後のシーンをタメたい）

とのことでした。

とりあえずサンプルです。

中身の解説は、前回と同様にコメントアウトで。

jquery

$(function(){
	var fadeoutSP = 600;	//　画像の切り替えスピード（フェードアウト）
	var fadeinSP = 500;		//　画像の切り替えスピード（フェードイン）
	var nextTM = 2000;		//　画像を表示している時間
	var endTM = 5000;		//　最後の画像を表示している時間（タメ）
							//　（1/1000秒）

	//　【シーン1】ページ読み込み直後に表示する最初の画像
	$(window).load(function() {
		$('#view img').css({opacity:'0'});
		$('#view img#view1').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene2();},nextTM);
	});

	//　【シーン1】ループ後に表示される最初の画像
	function scene1() {
		$('#view img#view3').stop().animate({opacity:'0'},fadeoutSP);
		$('#view img#view1').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene2();},nextTM);
	};

	//　【シーン2】2番目に表示される画像
	function scene2() {
		$('#view img#view1').stop().animate({opacity:'0'},fadeoutSP);
		$('#view img#view2').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene3();},nextTM);
	};

	//　【シーン3】最後に表示される画像
	function scene3() {
		$('#view img#view2').stop().animate({opacity:'0'},fadeoutSP);
		$('#view img#view3').stop().animate({opacity:'1'},fadeinSP);
		setTimeout(function(){scene1();},endTM);
	};
});

css

/* 切り替えたい画像をpositionで重ねています */

#view{
	position:relative;
	top:0;
	left:0;
	width: 300px;
	height:200px;
}
#view img {
	position:absolute;
	left:0;
	top:0;
}

HTML

<div id="view">
	<img src="sample1.gif" alt="" id="view1"><!-- シーン1の画像 -->
	<img src="sample2.gif" alt="" id="view2"><!-- シーン2の画像 -->
	<img src="sample3.gif" alt="" id="view3"><!-- シーン3の画像 -->
	<img src="sample_loader.gif" alt=""><!-- ローディング画像 -->
</div>

なんかスマートじゃないな~。