JavaScript PR

【setTimeout・clearTimeout】指定秒数毎の繰り返し処理(画像の切替え)

記事内に商品プロモーションを含む場合があります

JavaScriptのsetTimeout・clearTimeoutを使って、指定秒数毎に繰り返し画像の切替え処理を行う方法をご紹介します。

CSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

setTimeout・clearTimeoutを使って、指定秒数毎に繰り返し画像の切替え処理を行うJavaScriptの記述

※setTimeout()で1秒毎に繰り返し画像切替処理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の記述

※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の繰り返し処理(画像の切替え)を行うページデモ

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