JavaScript

jQueryでの画像スライドショー: setIntervalを用いた一定間隔切替えガイド

  /

今回は、jQueryとsetIntervalを使って複数の画像を一定の間隔で切替える方法を詳しく解説します。
これは、ウェブサイトやブログのコンテンツで動的な要素を追加する際に非常に役立つテクニックです。特にスライドショーやプロモーションのバナー表示などで活用できます。

Contents

なぜこの方法が必要なのか？

まず、複数の画像を連続して切り替えることによって、ユーザーの注目を引くことができます。また、アニメーションGIFを使用するよりも、切り替える画像や間隔を容易に制御できるため、より柔軟なデザインやプレゼンテーションが可能となります。

複数画像（png）を一定間隔で切替えるエリアのCSSの記述

まず、切り替える画像を表示するエリアのスタイルを設定します。以下はその基本的なCSSの記述ですが、必要に応じて変更していただければと思います。

※こちらのCSSは、ウェブページのベースとなるスタイルを指定するものです。具体的には、ページ全体のマージンやパディングのリセット、見出しのスタイルなどを指定しています。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:18px;
	font-weight:bold;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

jQueryとsetIntervalを使って複数画像を一定間隔で切替えるJavaScriptの記述

次に、画像を切り替えるためのJavaScriptを記述します。こちらのスクリプトは、500ミリ秒ごとに4枚の画像を順番に切り替えるようになっています。

※注意: このスクリプトを動作させるためには、jQueryのバージョン1.8系を読み込む必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var count = setInterval(changeImg, 500);//ミリ秒数
    i = 1;
    function changeImg(){
        $("#idImgchng").children("img").attr("src","i" + i + ".png");
        if(i <= 3){	//4枚の画像を切替
            i++;
        }else{
            i = 1;
        }
    }
});
</script>

複数画像（png）を一定間隔で切替えるエリアのHTMLの記述

切り替える画像を表示するHTMLのエリアを設定します。以下のコードでは、id=”idImgchng”のdiv要素内のimg要素のsrc属性をJavaScriptで変更しています。

<div id="idImgchng">
    <img src="i1.png" width="200" height="200">
</div>

jQueryとsetIntervalで複数のpng画像一定間隔で切替えるアニメーションデモページ

具体的な動作を確認するためのデモページを以下のリンクからご覧いただけます。

jQueryとsetIntervalで複数のpng画像一定間隔で切替えるアニメーションデモページ

まとめ

この方法を使用すれば、アニメーションGIFを使用することなく、簡単に画像を一定の間隔で切り替えることができます。ただし、用途に応じてアニメーションGIFを使用するのも一つの手段です。どちらを選択するかは、サイトの目的やデザイン、読み込み速度などの要因を考慮して判断してください。

これにより、サイトの動的な表現力を高めることができ、訪問者に新しい体験を提供することができます。ぜひ、この技術を活用して、魅力的なウェブページを作成してみてください。

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

画像切替 setInterval
関連記事