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