Web初心者がjQuery イチから作るフェードイン・フェードアウトするスライドショーの実装方法(サンプル付き)

Web初心者がjQuery イチから作るフェードイン・フェードアウトするスライドショーの実装方法(サンプル付き)
今回は、web初心者向けにイチから作るフェードイン・フェードアウトするスライドショーのjQueryを実装します。

いままであまり詳しく解説を入れてなかったので今回解説を交えながら自動でスライドショーを作ってみます。

ページコンテンツ

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。
これが無いと動きません。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

今回使うjQueryオブジェクト、コート STEP2

今回のスライドショーで使うjQueryのコードは「find」「fadeOut」「fadeIn」「appendTo」を使いますのでこの解説からします。

find

指定要素が持つ全子孫要素から、指定条件式に合致するものを選択する。

難しい言葉ですね。

簡単に言うと「探す」と言う機能です。

例

<p>今日は<span>雨</span>です。明日は<span >曇り</span>です。</p>

1	<p>今日は<span>雨</span>です。明日は<span >曇り</span>です。</p>

こんなhtmlがあったとします、
ソースを見るとspanで「雨」「曇り」が囲まれています。
これをfindを使ってこの文字を赤色にするには

$("p").find("span").css('color','red');

1	$("p").find("span").css('color','red');

記述します。

「pタグからfindでspan要素を探して、文字の色を赤くする。」ということです。

fadeOut

表示されている要素をフェードアウトさせます。

これは文字通り「フェードアウト（消えていく）」なので解説は必要ないかな。

fadeIn

表示されている要素をフェードインさせます。

これは文字通り「フェードイン（表示されていく）」なので解説は必要ないかな。

appendTo

要素の中身を他の要素に追加する。

これも難しいですね。

簡単に言うと「移動させる」と言う機能です。

例

<p>今日は雨です。明日は曇りです。</p>
<span>昨日は晴れです。</span>

1 2	<p>今日は雨です。明日は曇りです。</p> <span>昨日は晴れです。</span>

こんなhtmlがあったとします、
これを表示させると

今日は雨です。明日は曇りです。
昨日は晴れです。

こうやって表示されますね。

で、appendToを使ってみます。

$("p").appendTo("span");

1	$("p").appendTo("span");

今日は雨です。明日は曇りです。
昨日は晴れです。

↓↓↓↓

昨日は晴れです。
今日は雨です。明日は曇りです。

移動します。

実際に動く記述を書きます STEP3

いきなりですが、今回のjQueryを書きます。

$(function(){
	
	//5秒おきに
	var interval = 5000;	
	
	$('.slideshow').each(function(){
	
	//クラスslideshowに入っている値を変数containerに保存
	var container = $(this);
	
	function switchImg(){
		//containerの中にあるimgを探してきて、変数imgに保存
		var img = container.find('img');
		
		var first = img.eq(0);　//先頭で表示されている画像
		
		var second = img.eq(1);　//2番目の画像
	
		//変数firstをフェードアウトさせて、変数containerへ移動させる
		first.fadeOut().appendTo(container);
		
		//変数secondをフェードインさせる
		second.fadeIn();
	
	}
	
	setInterval(switchImg, interval);
	
	
	});
	
});

$(function(){

//5秒おきに

var interval = 5000;

$('.slideshow').each(function(){

//クラスslideshowに入っている値を変数containerに保存

var container = $(this);

function switchImg(){

//containerの中にあるimgを探してきて、変数imgに保存

var img = container.find('img');

var first = img.eq(0);　//先頭で表示されている画像

var second = img.eq(1);　//2番目の画像

//変数firstをフェードアウトさせて、変数containerへ移動させる

first.fadeOut().appendTo(container);

//変数secondをフェードインさせる

second.fadeIn();

}

setInterval(switchImg, interval);

});

しくみ

5秒後に画像が変わる
表示されている画像がフェードアウトして一番最後に移動する
次の画像をフェードインして表示させる

詳しく解説いいっても、ソースコードの中に書いてあることが全てなんですが。。。。

setInterval(switchImg, interval)
これについてちょっとお話します。

今回は5秒おきに画像が変わるスライドショーです。

setInterval(関数,ミリ秒)

↓↓

setInterval(switchImg, interval)

5秒ごとにswitchImgを実行します。

「○秒ごとに○○する」ということで、フェードイン・フェードアウト以外にも例えばオブジェクトを動かしたりすることができます。

HTMLを設置します STEP4

<div class="slideshow">
    <img src="images/015/01.jpg" alt="" />
    <img src="images/015/02.jpg" alt="" class="alt" />
    <img src="images/015/03.jpg" alt="" class="alt" />
    <img src="images/015/04.jpg" alt="" class="alt" />
    <img src="images/015/05.jpg" alt="" class="alt" />
    <img src="images/015/06.jpg" alt="" class="alt" />
</div>

</div>

画像は何枚でも大丈夫です。
＜div id="slideshow"＞も忘れないでください。CSSで制御する箇所がありますので。

CSSを記述します STEP4

.slideshow{
	width:680px;
	height:510px;
	float:left;
	/*画像を絶対配置で表示させるため*/
	position: relative;
}



.slideshow img{
	/*画像を1箇所に重ねる*/
	position: absolute;
	top:0;
	left:0;
}


.slideshow img.alt{
	display: none;
}

.slideshow{

width:680px;

height:510px;

float:left;

/*画像を絶対配置で表示させるため*/

position: relative;

}

.slideshow img{

/*画像を1箇所に重ねる*/

position: absolute;

top:0;

left:0;

}

.slideshow img.alt{

display: none;

}

画像が数枚あるので画像を一箇所に重ねるようにしました。

まとめ

[サンプル] jQuery イチから作るフェードイン・フェードアウトするスライドショーの実装方法

よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。(画像のパスは環境に合わせてください)
画像が自動で変わるjQueryは、サイトのメイン画像などでよく使われますのでぜひ試してみてください。

※firefox、クローム、IEで動いていることを確認しております。