CGI-BBS > JAVA/JavaScript > JavaScript > JavaScriptについて複数の画像をランダムに表示したい


カレッヂ
カレッヂ


質問者 dotaku  投稿日 2005/4/22(金) 17:18:18
こんにちは。

2行3列の表組みがあります。
各セルに任意の画像を表示させるスクリプトを書きたいと思います。
ページを開くたびに20個ほどの画像から任意に6つの画像を選び、それぞれをセルに表示することはできるでしょうか。
各セルの中に20個のファイルの中からランダムに1つのファイルを表示させるスクリプトは既存のものを書き換えることで可能かと思いますが、この場合、別のセルに同じ写真が表示されるタイミングもありうるのではないかと思うのですが....

よろしくお願いします。

【習熟度】多少の設置経験

回答者 sim  [削除]  投稿日 2005/4/22(金) 20:21:38
<body onload="changeImage()">
<script type="text/javascript">
	var Images = new Array();
	for(i=0;i < 20;i++){
		Images[i] = './' + i + '.gif';
	}
	function changeImage(){
		for(i=0;i<6;i++){
			k = parseInt(Math.random() * Images.length);
			Images.splice(k,1);
			document.getElementById(i).src=Images[k];
		}
	}
</script>
<table>
	<tr>
		<td><img id=0 src=""></td>
		<td><img id=1 src=""></td>
		<td><img id=2 src=""></td>
	</tr>
	<tr>
		<td><img id=3 src=""></td>
		<td><img id=4 src=""></td>
		<td><img id=5 src=""></td>
	</tr>
</table>

こんな感じはどうでしょう。
  「別のセルに同じ写真が表示されるタイミング」
という状態がどのような状態かはわかりませんが、
「6個の画像がUNIQUEである」という条件は満たせると思います。
回答者 sim  [削除]  投稿日 2005/4/22(金) 20:25:13
すいません。修正です。
src=Images[k];
と
spliceの部分を入れ替えました。


<body onload="changeImage()">
<script type="text/javascript">
	var Images = new Array();
	for(i=0;i < 20;i++){
		Images[i] = './' + i + '.gif';
	}
	function changeImage(){
		for(i=0;i<6;i++){
			k = parseInt(Math.random() * Images.length);
			document.getElementById(i).src=Images[k];
			Images.splice(k,1);
		}
	}
</script>
<table>
	<tr>
		<td><img id=0 src=""></td>
		<td><img id=1 src=""></td>
		<td><img id=2 src=""></td>
	</tr>
	<tr>
		<td><img id=3 src=""></td>
		<td><img id=4 src=""></td>
		<td><img id=5 src=""></td>
	</tr>
</table>
--------------------------------------------------------
	for(i=0;i < 20;i++){
		Images[i] = './' + i + '.gif';
	}

上記の部分は

Images[0]〜Images[19]を自動的に作成しているだけなので、
任意の画像ファイル名に変えてあげてください。
回答者 YuponTKD  [削除]  投稿日 2005/4/22(金) 20:46:27
こんなのはどうでしょうか。
ランダムで、同じ画像が重ならないように6つ表示します。
<script>
IMAGES=new Array();
IMAGES[0]="x1.gif";IMAGES[1]="x2.gif";
IMAGES[2]="x3.gif";IMAGES[3]="x4.gif";
IMAGES[4]="x5.gif";IMAGES[5]="x6.gif";
IMAGES[6]="x7.gif";IMAGES[7]="x8.gif";
IMAGES[8]="x9.gif";IMAGES[9]="x10.gif";
IMAGES[10]="x11.gif";IMAGES[11]="x12.gif";
IMAGES[12]="x13.gif";IMAGES[13]="x14.gif";
IMAGES[14]="x15.gif";IMAGES[15]="x16.gif";
IMAGES[16]="x17.gif";IMAGES[17]="x18.gif";
IMAGES[18]="x19.gif";IMAGES[19]="x20.gif";
NUMBER=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
document.write("<table border=1><tr>");
var i;
var n=0;
for(i=0;;i++){
	j=Math.floor(Math.random()*20);
	if(NUMBER[j]==0){
		if(n == 3){
			document.write("</tr><tr>");
		}
		document.write("<td><image src=\""+IMAGES[j]+"\"></td>");
		n++;
		NUMBER[j]=1;
	}
	if(n==6){
		break;
	}
}
document.write("</tr></table>");
</script>
いろいろエラーもあるとは思います。
それと、ランダムでよかったのでしょうか?
質問者 dotaku  [削除]  投稿日 2005/4/25(月) 08:20:34
simさん、YuponTKDさん ありがとうございました。

とりあえずいただいたスクリプトをコピーしてHTMLを作成してみますときちんと動作しました。
ページを開くごとに各セルにランダムに画像が表示されています!
しばらく様子を見てトラブルがでて解決できないことがありましたら、またお知恵を下さい。

ありがとうございました。

このページは終了したので返信(回答)は書きこめません
 


Web裏技