- ベストアンサー
画像ランダム表示、しかしダブらないように…
トップページの画像をランダム表示させたいです。 1枚だけならどこかでソースが載っていたのでそれをコピーしたらいいだけだと思うので問題はないのですが、3枚をランダム表示させ、なおかつ同じ物が表示しないようにしたいのです。 もちろん、画像保存フォルダは1つです。また、ファイルは順次増やして行きたいです。 1枚目の画像が決定した後、それ以外の画像からランダムに選択。さらに1枚目・2枚目の画像が決定したらそれ以外の画像からランダムに選択。 こんな事が出来ますか? また、どうしたらいいのでしょうか? よろしくお願いします。
- master-3rd
- お礼率39% (524/1325)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (3)
画像ファイルが大量になる場合は、#2の方のおっしゃるように、そのファイル名に連番をつけ、連番以外は共通した文字列になるようにしておき、スクリプトの方で連番のところだけを操作してファイルを特定できるような形にした上で、スクリプトからそのファイルを読み出すようにする方が良いと思います。 例えば、image0.jpg、image1.jpg～image100.jpgのような形です。 このとき、ファイルの保存形式や保存先のディレクトリも一つに統一する必要があると思いますので、その点にも注意してください。 ランダムで指定しうる画像が100枚以上とかなり大量の画像を想定しているようですので、前掲のスクリプトだと処理が重くなりすぎるきらいがあります。 そのあたりも含めて、前掲のスクリプトを修正してみました。 <html> <head> <title></title> <script type="text/javascript"><!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*100);//「Math.random()*100」の"100"は、用意している画像ファイルの枚数を指定 if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo();} } } NoMem[n]=x; } for (k=0; k<3; k++){ RndmNo(k); } //以上、乱数を生成して配列に格納。 RndImg= new Array(); for (i=0; i<3; i++){ RndImg[i]= new Image(); RndImg[i].src="images/image"+NoMem[i]+".jpg"; //「"images/image"」には画像ファイルへのパスの共通部分を、「".jpg"」には画像ファイルに共通の拡張子を入れます } //イメージオブジェクトとして表示する画像を取得 function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; } window.onload=ImgDisp; //--></script> </head> <body> <img src="*" name="imgs0"><br> <img src="*" name="imgs1"><br> <img src="*" name="imgs2"> </body> </html> なお、上記のスクリプトでは、画像ファイルの連番が0から始まることを想定して作成しています。 連番が1から始まる場合は、乱数生成部のMath.floor()をMath.ceil()にするか、「 NoMem[n]=x;」ここを「 NoMem[n]=x+1;」としてください。 あと、上記では画像ファイルを読み出すタイミングを若干早くするために、スクリプト内でイメージオブジェクトとして表示する画像を取り込んでいますが、それが必要ないと思われる場合には、イメージオブジェクトとして画像ファイルを取得する部分を削除し、ImgDisp()関数を function ImgDisp(){ document.images["imgs0"].src="images/image"+NoMem[0]+".jpg"; document.images["imgs1"].src="images/image"+NoMem[1]+".jpg"; document.images["imgs2"].src="images/image"+NoMem[2]+".jpg"; } といった具合にしても良いと思います。 このような感じではいかがでしょうか。
お礼
返答ありがとうございました。 ばっちり出来ました。 ちなみにですが、もう2点ほどよろしいでしょうか。 1つは上記スクリプトでのファイル名ですが、「0.jpg」「1.jpg」～～「100.jpg」で保存しないと動かないのはわかったのですが、整理しやすいように「0000.jpg」「0001.jpg」～～「0100.jpg」という風には出来ないでしょうか? 現状だと、PCに保存してあるとき 「198.jpg」 「199.jpg」 「2.jpg」 「20.jpg」 ～～ と、ちょっと整理しづらくなってしまいます。 さらにもう1点ですが、 1個の場合はどうしたらいいのでしょうか? あてにしていたスクリプト配布サイトがなくなっていて、他のサイトを探しても一番最初に教えていただいた画像1枚に1行必要なタイプしか見つけることが出来なかったです。 よろしければ2点を教えてください。お願いします。
- shevy
- ベストアンサー率44% (69/156)
画像ファイルの名前をあらかじめ 1.jpg 2.jpg ↓ 100.jpg みたいに連番にしといてフォルダに入れといて、 そして１から１００までの乱数＋ストリングのjpgを結合して、画像ファイルを一枚取得。 その際、取得したファイル名を別の変数に入れといて、次の二枚目の画像取得時に if文でもし同じなら排除して、取得しなおしにする。 三枚目も同じ要領で。 これならどうでしょうか。 先にファイル名を規則立ててつけておく必要がありますが。
お礼
返答ありがとうございます。 >先にファイル名を規則立ててつけておく必要が これは可能です。どちらにしろ今から100枚以上の画像をリサイズ・加工する必要があるので規則正しく保存することは出来ます。 >１から１００までの乱数＋ストリングのjpgを結合して、画像ファイルを一枚取得。 すみません。全然方法がわからないです。JavaScriptはすでにあるやつをコピーするしか能がありません。 出来ればズバリ書いていただけるとありがたいのですが… よろしくお願いします。
かなり力技ですが、サンプルソースを作ってみました。 <html> <head> <title></title> <script type="text/javascript"><!-- RndImg = new Array(); NoMem = new Array(); for (i=0; i<4; i++){//「i<4」の"4"は画像の枚数分を指定 RndImg[i] = new Image(); } //以下、画像オブジェクトに画像のURLを指定 RndImg[0].src="***1.jpg" RndImg[1].src="***2.jpg" RndImg[2].src="***3.jpg" RndImg[3].src="***4.jpg" //以下、乱数生成の関数 function RndmNo(n){ x=Math.floor(Math.random()*RndImg.length); if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo();} } //上記ループで重複する番号がないかチェック。 重複していればこの関数を再起 } NoMem[n]=x;//生成した乱数を配列に格納 } for (k=0; k<3; k++){//「k<3」の3は画面上に表示する画像の枚数を指定 RndmNo(k); } function ImgDisp(){ document.images["imgs0"].src=RndImg[NoMem[0]].src; document.images["imgs1"].src=RndImg[NoMem[1]].src; document.images["imgs2"].src=RndImg[NoMem[2]].src; } window.onload=ImgDisp; //--></script> </head> <body> <img src="*" name="imgs0"><br> <img src="*" name="imgs1"><br> <img src="*" name="imgs2"> </body> </html> 流れとしては、画像オブジェクトを配列として格納しておき、また乱数から得る値の重複をチェックするための配列も用意しておきます。 次に、乱数から得た値を格納する配列に、乱数を生成する関数を呼び出して順次値を入れ込んでいきます。 このとき、乱数を生成する関数では、前に格納した値と重複がないかを順次チェックし、重複があった場合は関数を再起、そうでない場合は配列に値を格納して処理を終了します。 乱数を格納した後は、それを利用して各画像ファイルを変更します。 一応、これでランダムに、かつ重複がないように、画面上に画像を表示できると思います。 参考になれば…
お礼
早速の返答ありがとうございます。 ただ、1つ気になる点があります。 「画像オブジェクトに画像のURLを指定」 という項目なのですが、この状態の場合ファイル数分、行が必要になるわけですよね。 枚数が少なければこの方法でもかまわないのですが、画像が100枚あれば100行必要ということですよね。 100行も書くのはちょっとスマートではないので何か良い方法は無いでしょうか? 良い方法があれば教えてください。 お願いします。
お礼
何度も返答ありがとうございます。 両方とも望みどおりのスクリプトを書いていただき感謝感激です。 これでページ作成が進みます。 また何かありましたらよろしくお願いします。