- ベストアンサー
一定時間ごとにｇｉｆ画像の切り替え方法
赤→黒→緑の画像を5秒ごとに切り替えたいのですが、時間を指定して順番に切り替えることはできるのでしょうか？
- DINO-PIE
- お礼率83% (498/599)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ごめんなさい。最初のとき意図をとりちがえていたようです。 ページを読み込んだらすぐに３秒のカウントをはじめていい んですよね。完全なコードは次のようになります。お試しください。すいませんでした。 <html> <head> <script type="text/javascript"> <!-- var pic= new Array('poro1','poro2','poro3') var num = 0; var itv = 3000; //間隔、単位ミリセカンド ie. 3000=3sec function showPic () { document.images['img'].src = 'image/' + pic[num] + '.jpg'; num++; if(num > 2) num = 0; setTimeout('showPic()', itv); } //--> </script> </head> <body onLoad="showPic()"> <br> <img id="img" src="image/poro1.jpg" height="180"> </body> </html>
その他の回答 (3)
既に、回答が出尽くしているので参考までに！ /* object の画像をパタパタと切り替えることを繰り返す。 ------------------------------------------------------------------- <body onLoad="patapatas(document.img, a_images, 500)"> ------------------------------------------------------------------- */ function patapatas(object, a_images, duration ,count){ if(count < a_images.length - 1){ count ++; }else{ count = 0; } object.src = a_images[count].src; var func=function(){patapatas(object, a_images, duration, count)} setTimeout(func, duration); } /* object の画像をパタパタと切り替えて最後の画像で停止。 ----------------------------------------------------- onclick="patapata(document.main.tv, a_tvs, 500, -1); ----------------------------------------------------- */ function patapata(object, a_images, duration ,count){ if(count < a_images.length - 1){ count ++; object.src = a_images[count].src; var func=function(){patapata(object, a_images, duration, count)} setTimeout(func, duration); } }
お礼
ありがとうございます。参考にいただきます。
- Blaise
- ベストアンサー率33% (13/39)
回答したコードで、HTML部分の画像の拡張子を「jpg」 にしてましたね。実際動かしてなかったのですいません でした。 えっと、お尋ねの件ですが、パスが合ってないだけだと 思います。 document.images['img'].src = '' + pic[num] + '.jpg'; を document.images['img'].src = 'image/' + pic[num] + '.jpg'; で行くのではと・・・ 動かなかったら、またください。
- Blaise
- ベストアンサー率33% (13/39)
できます。 <html> <head> <script type="text/javascript"> <!-- var pic= new Array('red','black','green') var num = 0; var itv = 5000; //間隔、単位ミリセカンド ie. 5000=5sec function showPic () { document.images['img'].src = '' + pic[num] + '.gif'; num++; if(num > 2) num = 0; setTimeout('showPic()', itv); } //--> </script> </head> <body onLoad="setTimeout('showPic()', itv);"> <div align=center> <img id="img" src="red.jpg"> </div> </html>
お礼
補足；画像はjpegを使用しています。3秒おきで設定してみました。
補足
始めの一枚目の絵は出てきましたが2枚目以降がうまくいきませんでした…。原因は何なのでしょうか？３つのファイルporo1,poro2,poro3はimageフォルダの中にあります。imageフォルダとhtmlファイルは同じ階層です。 <html> <head> <script type="text/javascript"> <!-- var pic= new Array('poro1','poro2','poro3') var num = 0; var itv = 3000; //間隔、単位ミリセカンド ie. 3000=3sec function showPic () { document.images['img'].src = '' + pic[num] + '.jpg'; num++; if(num > 2) num = 0; setTimeout('showPic()', itv); } //--> </script> </head> <body onLoad="setTimeout('showPic()', itv);"> <br> <img id="img" src="image/poro1.jpg" height="180"> </body> </html>
お礼
完璧です。ありがとうございました。