- ベストアンサー
一定時間ごとに背景画像の切り替える方法
背景画像image1.pngとimage2.pngを5秒ごとに切り替えるにはどのようにプログラミングを行えばいいのでしょうか？
- DINO-PIE
- お礼率83% (498/599)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ごめんなさい。ブラウザ依存の書き方をしてました。 訂正しておきます。 一応、ＩＥと火狐では確認してあります。 <html> <head> <script language="javascript"> flg=1; function changeImage(num){ if(num!=1){ document.body.background="image1.png" return 1 }else{ document.body.background="image2.png" return 2 } } </script> </head> <body background="image1.png" onLoad="timeid=setInterval('flg=changeImage(flg)',5000)"> <input type="button" value="STOP" onClick="clearTimeout(timeid)"> </body> </html>
その他の回答 (3)
- Blaise
- ベストアンサー率33% (13/39)
チャチャじゃないんですが、 N0.2のyambejpさんのコード。ちょっと見ですが、 if(num!=1){ document.body.background="image1.png" return 1 }else{ document.body.background="image2.png" return 2 } で、戻り値のところをそれぞれ return flg=1 return flg=2 のようにしたほうがよくはないですか。まちが っていたらごめんなさい。
補足
return flg=1 return flg=2 を書き換えましたがSTOPボタンが表示されただけのページになってしまいました・・・。凡ミスでしょうか？
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでどうでしょう？ 分岐条件を調整すれば、何枚でもいけるし、ランダムでも いけそうです。ついでにとめ方も書いておきました。 setIntervalの第２引数がループするミリ秒です。 <html> <head> <script language="javascript"> function changeImage(num){ if(num!=1){ document.body.background="image1.png" return 1 }else{ document.body.background="image2.png" return 2 } } </script> </head> <body background="1.jpg" onLoad="flg=1;timeid=setInterval('var flg=changeImage(flg)',5000)"> <input type="button" value="STOP" onClick="clearTimeout(timeid)"> </body> </html>
お礼
画像ファイルと同じ階層にこのソースをコピーして、htmlファイルを作りましたが、STOPボタンが表示されただけのページになってしまいました・・・。
- youdajin
- ベストアンサー率25% (18/70)
以下のサイトは参考になりませんか？
補足
同じページで写真画像を一定時間ごとに切り替える操作をＢＯＤＹタグに既にonLoadを使用しているのですが背景もつづけて使用できるのでしょうか？ 例… <body onLoad="showPic()" onLoad="img()">
お礼
うごきました。ありがとうございました。