JavaScript

JavaScriptで実現する画像切替：setTimeoutとclearTimeoutによる効果的な繰り返し処理テクニック

  /

今回は、ウェブ開発の中でよく使われるJavaScriptの機能の一つ、setTimeoutとclearTimeoutを使った画像の切替え方法をご紹介します。
このシンプルながらも強力な技術を使って、ユーザーの注目を集めるインタラクティブなウェブサイトを作成することができます。

Contents

CSSの基本設定

まずは、ページの基本的なスタイルを設定します。CSSはウェブページの見た目を整えるために不可欠で、以下のコードは画像が表示されるコンテナやテキストのフォント、配置などを定義しています。このCSSコードはあくまで一例であり、プロジェクトのニーズに合わせて自由に変更してください。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
	text-align:center;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 10px 0;
}
.cWrap{
	width:700px;
	margin:0 auto;
}
-->
</style>

JavaScriptでの画像切替え処理

JavaScriptを使って、一定間隔ごとに画像を切り替える処理cngimg()を実装します。
setTimeout関数は特定の時間が経過した後に一度だけ関数を実行するのに使用され、clearTimeout関数はsetTimeoutによって設定されたタイマーをキャンセルします。この二つを組み合わせることで、エンドレスに画像を切り替えることが可能になります。

<script type="text/javascript">
<!--
	var tid=0;
    var cnt=1;
    function cngimg() {
		document.images["cimg"].src="i"+cnt+".jpg";
        cnt++;
        if(cnt==4) cnt=1;
        clearTimeout(tid);
		//1秒（1000ms）毎に切替り
        tid=setTimeout("cngimg()", 1000);
    }
// -->
</script>

HTMLでの画像切替え処理の実装

実際にウェブページ上で画像が切り替わるように、HTMLを使って画像とJavaScript関数を組み合わせます。
bodyタグにonLoadイベントを使用して、ページが読み込まれた時に画像切替え処理cngimg()を自動的に開始します。
name=”cimg”の画像ファイル名を繰り返しカウント数毎の画像ファイル名に切り替えてます。

<body onLoad="cngimg()">
<div class="cWrap">

	<h1>指定秒数（1000ミリ秒毎）に画像要素を切替えます。<br />エンドレスでJavaScript処理を繰り返します。</h1>
    
    <div align="center"><img name="cimg" src="i01.jpg" alt="切替画像" width="150" height="150" /></div>


</div><!--/cWrap-->
</body>

setTimeout・clearTimeoutを使って指定秒数毎にJavascriptの繰り返し処理（画像の切替え）を行うページ

実際にこの機能を体験できるデモページを以下に設けました。理解を深めるのに役立ててください。

setTimeout・clearTimeoutを使って指定秒数毎にJavascriptの繰り返し処理（画像の切替え）を行うページデモ

まとめ

この記事では、JavaScriptのsetTimeoutとclearTimeoutを使用して、特定の時間間隔で画像を自動的に切り替える方法を紹介しました。この技術を使えば、動的でユーザーの関心を引くウェブサイトやアプリケーションを作成することが可能です。さらに、CSSとHTMLの基本的な知識を組み合わせることで、見た目も美しいインタラクティブな要素を実装できます。

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

画像切替 setTimeout clearTimeout
関連記事