森島

【怖くないJavaScript + jQuery】時間で切り替わるスライドショー

マークアップ
  • このエントリーをはてなブックマークに追加

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。
今回は時間で画像が切り替わるスライドショーを作りました。動作は一番シンプルで、クリックの処理は入っていません。TOPページでイメージ画だけ切替表示したい時に便利ですね。

合言葉は「jQuery　こわくない」です。

デモのファイルはこちらからダウンロードできます。

デモ

▼サンプルでは、3枚のスライドがフェードのアニメーションで切り替わります。

別ウィンドウで開く

Step1：まず下準備

こちらはいつもと同じですね。まず必要なファイルを読み込みます。
headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は slide.js とします）を読み込みます。
<head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script src="common/js/slide.js" type="text/javascript"></script>
</head>

Step2:次にHTMLの準備

今回必要なのはidのついたdivと、その中にimgを含むliを並べます。divのidはjsの中の記述と合わせます。liには「display:none;」をかけて非表示にしておきます。あとはそれぞれお好きにカスタマイズしてください。

<div id="slideArea">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
</ul>
</div>

Step3:jsを書き込む

headerで読み込んでいるはずの slide.js の中身を書き込んでいきましょう。
$(function(){
var slide = "#slideArea";
var i = 0;
$(slide).find(‘li’).eq(0).show();
var total = $(slide).find(‘li’).index();

setInterval(function(){
if(i < total){
$(slide).find(‘li’).fadeOut(1000);
i++;
setTimeout(function(){
$(slide).find(‘li’).eq(i).fadeIn(1000);
},1000);
}else if(i == total){
$(slide).find(‘li’).fadeOut(1000);
i = 0;
setTimeout(function(){
$(slide).find(‘li’).eq(i).fadeIn(1000);
},1000);
};
},6000);
});


全体を詳しく書くと、こう。
$(function(){
//slideするdivのidを設定
var slide = "#slideArea";

//変数iの初期値を設定
var i = 0;

//ページ読み込み時、スライドの1枚目を表示
$(slide).find(‘li’).eq(0).show();

//スライドの枚数を調べて変数totalに格納
var total = $(slide).find(‘li’).index();

//処理を繰り返す
setInterval(function(){
if(i < total){

//====▼iがtotalより小さい時の処理====
//表示されているスライドをフェードアウト
$(slide).find(‘li’).fadeOut(1000);

//iの値に+1する（次のスライドを表示する）
i++;
setTimeout(function(){
//フェードアウトが終わったらフェードイン表示
$(slide).find(‘li’).eq(i).fadeIn(1000);
},1000);
//=====================================

}else if(i == total){

//====▼iがtotalと同じ値になった時の処理====
//表示されているスライドをフェードアウト
$(slide).find(‘li’).fadeOut(1000);

//iの値を0（一番初めのスライド）に戻す
i = 0;
setTimeout(function(){
//フェードアウトが終わったらフェードイン表示
$(slide).find(‘li’).eq(i).fadeIn(1000);
},1000);
//=====================================

};
},6000);
});

解説
setIntervalを使用すると処理を繰り返すことができます。6000の箇所の数値を変更すると処理の間隔を遅くしたり早くしたりできます。
setInterval(function(){
//ここに書いた処理が6000ミリ秒ごとに繰り返しされます
},6000);

解説2
setTimeoutを使用すると処理を遅らせることができます。画像のフェードインとフェードアウトが同時に起こってしまうとレイアウトの崩れが起きてしまうので、フェードアウトの1000ミリ秒後にフェードインしています。fedeOutとfedeInのすぐ後の数字を増減させてアニメーションを遅くしたり早くしたりできます。同じ色の箇所は同じ数値に合わせて下さい。
//1000ミリ秒かけてフェードアウト
$(slide).find(‘li’).fadeOut(1000);

setTimeout(function(){
//1000ミリ秒後に1000ミリ秒かけてフェードイン
$(slide).find(‘li’).eq(i).fadeIn(1000);
},1000);

解説3
if文で、条件を設定して何枚目か調べて処理を変えています。
if(i < total){
//ここにスライドの1枚目～2枚目の処理
}else if(i == total){
//ここにスライド（最後のスライド）処理
};