WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:数枚の画像をランダム表示

0:[投稿] purin [2002/04/01 15:26 ][環境:WIN+IE WIN系+Java]

数枚の画像とそれに関するコメントを、ボタンを押す毎に
ランダムに各1回ずつ表示させていく、というページをJavaScriptで
作りたいのですが、上手い方法が思いつきません。

画像ファイル名とコメントは下記のようなコンストラクタ&配列を
作って入れ、

function imagefile(filename, comment) {
       this.filename = filename;
       this.comment = comment;
}
filelist = new Array(5);
filelist[0] = new imagefile("IMG0010.jpeg","4月1日撮影");
:           :                   :          
filelist[4] = new imagefile("20020101.jpeg","公園にて");

要素番号をMath.floor(Math.random()*要素数)で選んで
次の画像に移るためのボタンをonClickしたときに呼び出す関数の中に
document.write("<IMG SRC=\"filelist[i].filename\">");
こんな感じでいいかなと一瞬思ったのですが
document.write はページ構築後に使ってはいけないのですよね?
そこで詰まってしまいました。
つまり、ボタンを押すと、画像とコメントが違うものに置き換わる
という処理をどうすればいいのかが分からないのです。

また、配列に入っているうちの「何枚か」(5枚のうち3枚だけとか)
という処理(何枚、というのはプログラム内に書いておきますが)
を重複なく行うやり方も分かりません。

分かり難い文章かもしれませんが、お分かりの方、
どうかよろしくお願いします。

なお、フレームは使ってもいいですが、CSSは使いたくないです。


1:[回答] ヨシミ [2002/04/01 16:20 ]

たとえば・・・

<form name="time"><p>
<img alt="hoge" src="1st.jpg" name="photo">
<input type="text" name="str" size="20">
<input type="button" value="change" onclick="radi()">
</p></form>

<script type="text/javascript">
<!--
img = new Array(
    "IMG0010.jpeg",
    "20020101.jpeg"
);

msg = new Array(
    "4月1日撮影",
    "公園にて"
);

function radi() {
    s = Math.floor(Math.random()*2);
    document.images['photo'].src = img[s];
    document.forms['time'].elements['str'].value = msg[s];
}
radi();
// -->
</script>


2:[回答] purin [2002/04/01 16:38 ]

ヨシミさん、ありがとうございます。
でもこれだと、重複が発生してしまいますよね。

それから書き忘れましたが、3枚表示させた後に
ボタンを押すと、もう一度最初からランダムに表示する
ようにしたいです。


3:[完了] purin [2002/04/02 11:08 ]

無理のようなので
レイヤーを使いたいと思います


4:[完了] ma-to [2002/04/02 22:36 ]


>>3

いわゆる組み合わせが得たいんじゃないの ?
その部分の処理をどうにかしないとどうにもならないと思うが。。。
そしてその処理は探せば何処にでもあるだろう。以下はPCのディスクにあったもので、過去に何処か ( 探すのはだるいから失礼する ) からコピーしたものを保存しておいたもの。私の思考は微塵もないから書きこむ必要もないが書いた。


Math.int_random=function(int){
   return Math.floor(Math.random()*int);
}

Array.prototype.shuffle=function(){
   var i=this.length;
   while(0<i--)
       this.push(this.splice(Math.int_random(i),1));
   return this;
}

Array.prototype.getCombination=function(length){
   //新たなインスタンス。
   var combination=new Array;
   //つまり参照ではなく値として。好みではなく常識的に。
   for(var i in this)
       combination[i]=this[i];
   return combination.shuffle().slice(0,length);
}


そしてコンパイルエラーなどを回避する書き方にすれば公開できる。


5:[完了] ma-to [2002/04/03 12:28 ]

1つずれていたのとArray.prototype.spliceの標準のインターフェイスでは戻り値が常にArrayとのこと。訂正。


Array.prototype.shuffle=function(){
    var i=this.length+1;
    while(1<i--)
        this.push(this.splice(Math.int_random(i),1)[0]);
    return this;
}

Array.prototype.getCombination=function(length){
    var combination=new Array;
    for(var i in this)
        combination[i]=this[i];
    length==void(0)&&(length=combination.length);
    return combination.shuffle().slice(0,length);
}

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World