- ベストアンサー
javascriptを使って画像切り替え！時間によって移り変わる速度を変える方法
- javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。画像はsamp0.jpg～samp4.jpgの計5枚。ただ、問題があって、画像によって移り替わる時間を変えたいんです。それぞれ、画像0の時は5000ミリ秒、画像1の時は4000ミリ秒、画像2の時は3000ミリ秒…と移り変わる速度を変えたいのです。
- timeは配列を使用し、画像ごとに異なる時間を指定することで、時間が一定でない画像切り替えが可能になります。具体的なスクリプトでは、画像の読み込みと切り替えを行うための配列imgと、各画像に対応する時間を指定した配列timeを用意しています。
- window.onloadイベントで実行される関数anime内では、img配列の要素を順番にchengeImgのsrc属性に代入し、表示される画像を切り替えています。num変数が4より小さい場合はnumをインクリメントし、それ以外の場合はnumを0に戻します。そして、setTimeout関数にはanime関数自体と、次の画像への切り替えまでの時間をtime配列から取得して指定しています。
- mc0816
- お礼率94% (69/73)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
画像と表示時間をセットで記憶しておいて、その時間が経過したら次の画像に切替えることにして、こんな感じではどうでしょうか。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- window.onload = function(){ var images = [ ["samp0.jpg", 5000], ["samp1.jpg", 4000], ["samp2.jpg", 3000], ["samp3.jpg", 3000], ["samp4.jpg", 3000] ]; var cnt=0; (function(){ document.getElementById("changeImg").src = images[cnt][0]; var time = images[cnt++][1]; cnt %= images.length; setTimeout(arguments.callee, time); })(); } //--> </script> </head> <body> <p> <img src="samp0.jpg" id="changeImg" alt="image" style="width:700px; height:200px;"> </p> </body> </html> ＊画像のプレロードは行なっていませんので、行なうなら以下のような感じで初期処理に追加すればよろしいかと。 var img = []; for(cnt=0; cnt<images.length; cnt++){ img[cnt] = new Image(); img[cnt].src = images[cnt][0]; }
その他の回答 (3)
- 山田 太郎（@f_a_007）
- ベストアンサー率20% (955/4574)
お断り：例示のタイム引数が配列になっていません。訂正するのを忘れていました。
お礼
あらためて、ありがとうございました。
- 山田 太郎（@f_a_007）
- ベストアンサー率20% (955/4574)
＞画像によって移り替わる時間を変えたいんです。 ならば、画像と切り替えるタイムを配列で渡すとか・・・。 /* object の画像をパタパタと切り替えることを繰り返す。 ------------------------------------------------------------------- <body onLoad="setImages(3, 'koinu','jpg');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), count)} setTimeout(func, duration(count)); } /* 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), count)} setTimeout(func, duration(count)); } } ＊もう、随分とJavascriptを扱っていません。 ＊ですから、完全に動作するかどうかは疑問。 ＊duration(count)・・・＞duration と一定タイム版は動きますが・・・。
お礼
そういう書き方もあるんですね。 参考になります。 補足説明までも、いただき、 スクリプトを書いていただき、感謝です。 ぜひ、参考にいたします。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
最大公約数でタイマーをまわして、達するまでカウントアップすればよいのでは？ 今回の件であれば、1000ミリ秒（1秒)で処理し、グローバル変数たとえば countをインクリメントし、所定の回数未満のときには中断処理(return?)を行い 達したところで実行した上でcountをクリアすればよいでしょう
お礼
なるほど、なるほど… 理屈は分かったのですが、 どうもスクリプトがまだまだです(汗) ちょっと、試行錯誤してやってみます。 取り急ぎ、御礼まで。 ありがとうございました。
お礼
とても詳しく教えて下さり感謝です。 スクリプトが比較的、明解で、 初心者の私にも、分かりやすくて、理解できました。 早速やってみます。 それに、プリロードまで記載していただき、 本当に助かります。 これは、絶対、明日、会社でやってみます！！ 本当にありがとうございました。