setTimeout・clearTimeoutを使って指定秒数毎にJavaScriptの繰り返し処理（画像の切替え）

setTimeout・clearTimeoutを使って指定秒数毎に繰り返しJavaScriptで画像の切替え処理を行って見ます。

1．CSSの記述例

以下は任意ですので調整してみて下さい。

<style type="text/css">
<!--
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>

2．JavaScriptの記述例

<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>

3．HTMLの記述例

<div class="cWrap">


<h1>指定秒数（1000ミリ秒毎）に画像要素を切替えます。
エンドレスでJavaScript処理を繰り返します。</h1>

    

<div align="center"><img name="cimg" src="i01.jpg" alt="切替画像" width="150" height="150"></div>



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

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