ブログ

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

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

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

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

とのことでした。

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

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

jquery

[javascript]
$(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);
};
});
[/javascript]

css

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

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

HTML

[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>
[/html]

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