- ベストアンサー
Webページのスライドショーを自動スタートさせたい
- Webページのスライドショーを自動スタートさせる方法について教えてください。
- 初心者レベルで、スクリプトやCSSの内容を完全に理解していませんが、Webページのスライドショーを自動で開始する方法を知りたいです。
- 現在、スライドショーのページを作成しましたが、〔スタート〕ボタンを押さないとスライドショーが開始されません。ページ閲覧開始と同時に自動でスライドショーをスタートする方法を教えてください。
- toshitana
- お礼率80% (17/21)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <script type="text/javascript"><!-- var imgs = 2; var inttime = 1000; function showimage(num) { var imagename = num + ".jpg"; document.getElementById('slideshow').src = imagename; } var imgcount=1; function slideimage() { if( imgcount > imgs ) { imgcount = 1; } showimage( imgcount ); imgcount++; } var slideid; function startshow() { stopshow(); slideid = setInterval("slideimage()",inttime); } function stopshow() { clearInterval(slideid); } // --></script> <style type="text/css"><!-- div.photobox { text-align: center; } div.photobox img { border: gray 3px solid; } div.controlbox { text-align: center; margin: 0.3em 0px 1em 0px; } --></style> </head> <body> <div class="photobox"> <img src="1.jpg" id="slideshow" alt="スライドショー表示領域"> </div> <script type="text/javascript"><!-- startshow(); // --></script> </body> </html> こちらでやってみたところ、正しく動作したので、 上に書いたソースの何かが、抜けている可能性がありますね。 とりあえず、動作するソースを回答としておきますので、 これをコピペして、動作確認してみてください。
その他の回答 (2)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
なるほど。 であれば、 >〔スタート〕ボタンを押せばちゃんと動くのですが、押さないとスタートしません。 スタートボタンのHTMLタグに書かれているスクリプトはどうなっていますでしょうか？ onclick="ここの部分" 押したときに実行されるものを、押さなくても実行させるために、 HTMLの最後のほうに入れるという手をアナウンスしたつもりでしたが、 動かなかったようで、すいません。 それか、このスクリプトを参考にしたページがあるのでしょうから、 元のページを紹介してもらえますか？ （このサイトには、あなた個人のページは公開しなくて、かまいませんので）
補足
AsarKingChangさん、お世話かけます。（外出していたため返事遅れました） 参考にしたのは次のページです。ほとんどそのままコピペしました。 http://allabout.co.jp/gm/gc/23931/ よろしくお願いします。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
じっさいに試したわけではないので、動作するかは、わからないですが。 ボタンとやらの実行関数が、 startshow()； これなのかな？だったら、これをBODYの一番最後にでも、 <script> startshow()； </script> とでもすれば、動くとは思いますよ。 位置として</body>の直前当たりに。 <body onload=>で、実体化してないIDがあると落ちるソースもあり、 ここだけではわからないので、確実なのは、</body>の直前だとは 思いますが。
補足
早速のご回答、ありがとうございます。 ご指示通り、以下の3行を</body>の直前に追加してみましたが、見る限りでは同一動作で、変化はありませんでした。 <script> startshow()； </script> 質問に掲示したスクリプト（head内に記述してある）はそのままですが、それでよかったでしょうか。
お礼
AsarKingChangさん、ありがとうございましたっ。 その通りにやってみましたら、自動でスタートするようになりました。 Start/Stopも欲しかった（良い写真はじっくり見たい）ので、下記4行をやみくもにHTMLに追記したところ、Start/Stopも動くようになりました。 <div class="controlbox"> <input type="button" value="- START -" onclick="startshow();"> <input type="button" value="- STOP -" onclick="stopshow();"> </div> お世話になりました。これで解決しました。 ボランティア団体のサイトなんですが、これで仲間に喜んでもらえます。本当にありがとうございました。