【setTimeout・clearTimeout】指定秒数毎の繰り返し処理（画像の切替え）【JavaScript】 DAD UNION

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

Contents

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

setTimeout・clearTimeoutを使って、指定秒数毎に繰り返し画像の切替え処理を行う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>

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>

setTimeout・clearTimeoutを使って、指定秒数毎に繰り返し画像の切替え処理を行う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>