jQueryでsetIntervalを活用: 画像のフェードイン・フェードアウト切替方法完全ガイド｜DAD UNION

Web開発では、ユーザーの視覚的な興味を引き、ウェブサイトの見た目を向上させるために、画像のフェードイン・フェードアウトは非常に重要な技術です。
本記事では、JavaScript（jQuery）とCSSを使用して、複数のjpg画像をフェードイン・フェードアウトで切り替える方法について詳しく説明します。

Contents

CSSを使用した画像の重ね合わせ
JavaScriptを使用したフェードイン・フェードアウトの実装
HTMLでの画像の設定
jQueryを使用して複数画像をフェードインフェードアウトで切替表示デモページ
まとめ

CSSを使用した画像の重ね合わせ

まず初めに、複数の画像を1枚のように見せるためのCSSの記述方法について説明します。この方法では、.clImgクラスを用いて、複数の画像を重ね合わせます。以下のコードでは、positionプロパティを使用して画像を配置し、marginで中央に表示させる方法を採用しています。

CSSコード:

<style type="text/css">
<!--
.clImg{
	position:relative;
	width:200px;
	margin:0 auto;
}
.clImg img {
	position:absolute;
	left:0;
	top:0;
}
-->
</style>

　
このCSSコードにより、全ての画像が同じ位置に重なるように設定されます。重要なのは、画像がWebページ上でユーザーに見えるようにするために、相対位置を使って画像を配置することです。

JavaScriptを使用したフェードイン・フェードアウトの実装

次に、JavaScript（jQuery）を使用して、画像がフェードイン・フェードアウトしながら切り替わる機能を実装します。以下のコードでは、setIntervalメソッドを使って、指定した時間間隔（ここでは3000ミリ秒）ごとに画像を切り替えます。.fadeIn() と .fadeOut() メソッドにより、画像の表示と非表示をスムーズに切り替えることができます。

JavaScriptコード:

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.clImg img:gt(0)').hide();
	setInterval(function() {
		$('.clImg :first-child').fadeOut().next('img').fadeIn().end().appendTo('.clImg');
	},3000);
});
</script>

　
このコードでは、最初に全ての画像を非表示にし（.hide()）、最初の画像だけを表示します。その後、setIntervalにより、現在の画像をフェードアウトし、次の画像をフェードインするという処理を繰り返します。

HTMLでの画像の設定

JavaScriptとCSSを適用するためには、HTML内で対象となる画像を設定する必要があります。以下のHTMLコードは、3枚の画像を.clImgクラス内に配置し、それぞれに異なる画像ファイルを指定しています。

HTMLコード:

<div class="clImg">
<img src="i01.jpg" alt="1枚目の画像">
<img src="i02.jpg" alt="2枚目の画像">
<img src="i03.jpg" alt="3枚目の画像"></div>

　
このコードにより、3枚の画像がWebページに配置され、JavaScriptとCSSによって制御されます。

jQueryを使用して複数画像をフェードインフェードアウトで切替表示デモページ

実際の動作を確認するためには、以下のリンクからデモページをご覧いただけます。デモページでは、上記で説明した通りの画像切り替えが実際に動作しています。

jQueryを使用して複数画像をフェードインフェードアウトで切替表示デモ

この実装方法は、特に余計なコントローラや矢印が不要なシンプルな画像スライダーを設計する際に最適です。しかし、より複雑な機能（例えば、自動スライドの停止や再開、特定の画像へのジャンプなど）を実装したい場合は、追加のJavaScriptコードが必要になります。

まとめ

この記事では、JavaScript（jQuery）とCSSを使用して、複数のjpg画像をフェードイン・フェードアウトで切り替えるシンプルな方法をご紹介しました。Web開発において、画像は重要な役割を果たし、ユーザーの関心を引きつける効果的な方法の一つです。この技術を使えば、訪問者の興味を惹き、より魅力的なウェブサイトやアプリケーションを作成することができます。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。