トップページの画像をランダム表示させたいです。
1枚だけならどこかでソースが載っていたのでそれをコピーしたらいいだけだと思うので問題はないのですが、3枚をランダム表示させ、なおかつ同じ物が表示しないようにしたいのです。
もちろん、画像保存フォルダは1つです。また、ファイルは順次増やして行きたいです。
1枚目の画像が決定した後、それ以外の画像からランダムに選択。さらに1枚目・2枚目の画像が決定したらそれ以外の画像からランダムに選択。
こんな事が出来ますか?
また、どうしたらいいのでしょうか?
よろしくお願いします。
No.4ベストアンサー
- 回答日時:
こんばんは。
#3の返信読みました。1点目の、ファイル名を0000.jpgのようにするケースですが、前掲のスクリプトのRndmNo()関数を以下のものに置き換えれば、可能です。
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(n);}
}
}
x=new String(x);
if (x.length==1){ x="000"+x;}
else if (x.length==2){ x="00"+x;}
else if (x.length==3){ x="0"+x;}
NoMem[n]=x;
}
上は、乱数を格納した変数xについて、これをStringオブジェクトにして、その桁数を取得し、1桁の時は先頭に0を3つ、2桁の時は先頭に0を2つ、3桁の時は先頭に0を1つ補完する処理を加えてあります。 これで0000.jpg、0020.jpgといったファイル名にして管理することも可能です。
2点目の追補の内容がちょっとわかりづらいのですが、1個というのは、用意している画像ファイルは100枚以上で、そのうちの画像を1個だけページ内にランダムに表示するということでよろしいでしょうか?
その場合でしたら、前掲のソースの重複を排除する処理などが必要なくなりますので、それらを除いた下記のソースでいけるのではないかと思います。
<html>
<head>
<title></title>
<script type="text/javascript"><!--
x=Math.floor(Math.random()*100);
//「Math.random()*100」の"100"は、用意している画像ファイルの枚数を指定
x=new String(x);
if (x.length==1){ x="000"+x;}
else if (x.length==2){ x="00"+x;}
else if (x.length==3){ x="0"+x;}
RndImg= new Image();
RndImg.src="images/image"+x+".jpg";
//イメージオブジェクトとして表示する画像を取得
//「"images/image"」には画像ファイルへのパスの共通部分を、「".jpg"」には画像ファイルに共通の拡張子を入れます
function ImgDisp(){
document.images["imgs0"].src=RndImg.src;
}
window.onload=ImgDisp;
//--></script>
</head>
<body>
<img src="*" name="imgs0">
</body>
</html>
なお、こちらも前掲のソースと同様、画像ファイルには連番の名前をつけて管理する必要があります。
見当違いがありましたら、ごめんなさい。
参考になれば幸いです。
何度も返答ありがとうございます。
両方とも望みどおりのスクリプトを書いていただき感謝感激です。
これでページ作成が進みます。
また何かありましたらよろしくお願いします。
No.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点を教えてください。お願いします。
No.2
- 回答日時:
画像ファイルの名前をあらかじめ
1.jpg
2.jpg
↓
100.jpg
みたいに連番にしといてフォルダに入れといて、
そして1から100までの乱数+ストリングのjpgを結合して、画像ファイルを一枚取得。
その際、取得したファイル名を別の変数に入れといて、次の二枚目の画像取得時に
if文でもし同じなら排除して、取得しなおしにする。
三枚目も同じ要領で。
これならどうでしょうか。
先にファイル名を規則立ててつけておく必要がありますが。
返答ありがとうございます。
>先にファイル名を規則立ててつけておく必要が
これは可能です。どちらにしろ今から100枚以上の画像をリサイズ・加工する必要があるので規則正しく保存することは出来ます。
>1から100までの乱数+ストリングのjpgを結合して、画像ファイルを一枚取得。
すみません。全然方法がわからないです。JavaScriptはすでにあるやつをコピーするしか能がありません。
出来ればズバリ書いていただけるとありがたいのですが…
よろしくお願いします。
No.1
- 回答日時:
かなり力技ですが、サンプルソースを作ってみました。
<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行も書くのはちょっとスマートではないので何か良い方法は無いでしょうか?
良い方法があれば教えてください。
お願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- Visual Basic(VBA) Powerpointでランダムな数字の結果を表示するマクロ 2 2023/08/04 10:04
- Instagram インスタの画像を複数枚投稿出来るものと出来ないものがある問題についてどなたか教えて下さい。 インスタ 4 2022/06/07 13:53
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Excel(エクセル) エクセルで行を一つにする方法を教えてください 3 2022/04/21 14:07
- LINE スマホを替えてから、LINEの画像が表示されなくなりました 1 2022/10/04 13:41
- その他(プログラミング・Web制作) 「問題も答えも画像」のクイズを簡単に作れるもの何かありませんでしょうか? 1 2022/05/30 17:29
- ガーデニング・家庭菜園 この木の名前を教えてください【画像3枚、一括投稿】 5 2022/04/22 11:16
- モニター・ディスプレイ NVIDIA Geforce GT 710の解像度設定について教えて下さい 3 2022/06/19 13:00
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript スライドの画像にリ...
-
textareaに画像を表示したい
-
HTMLで条件分岐はできますか?
-
(超初心者向け)マウスオーバ...
-
<table>、もしくは<iframe>内で...
-
画面の表示位置を指定させて表...
-
リロードさせるには?
-
各フォルダから1枚ずつ画像をラ...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックして複数の...
-
MAX関数を使ってからLEFT JOIN...
-
スタイルシートで画面を上下に...
-
アコーディオンメニューの開閉制御
-
javascriptでスタイルを動的に...
-
キャラクターがぴょこんと飛び...
-
OpenCV での画素値の比較について
-
Ctrl+F(検索)の窓を出したいの...
-
色の変更
-
javascriptで、クリックしたら...
-
c++std::string型をTCHARに変換...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
Javascriptで指定した日付と時...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
スライダーを実装した場合、ペ...
-
1枚の画像をクリックすると複数...
-
HTMLで条件分岐はできますか?
-
JavaScript スライドの画像にリ...
-
オンマウスで、画像切り替え+...
-
画像の重なりの順序を代える方...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
画像をドラッグ&ドロップで移...
-
各フォルダから1枚ずつ画像をラ...
-
jQueryで特定のURLの時のみ表示
-
bxsliderにて読み込み後に内容...
-
prettyphotoの画像表示について
-
WEBページ立ち上げ時に1回のみ...
おすすめ情報