- 締切済み
教えて下さい。ランダムにバナー配置
HPにバナーを起きたいのですが、配置順序をランダムに入れ替えたいのです。ランダムバナーで調べても複数の画像の中から１つが表示される物しかなく自分ではどうもできないので困ってます。 バナー数は１０個で１０個表示で順序だけ入れ替える物が欲しいのですがよろしくお願い致します。 できれば、テーブルでレイアウトしてますのでテーブルに配置しやすい物がいいんですが…。
- kumiri
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
試しに書いてみました。 ご質問で求められている動作は確保できていると思います。 <html> <head> <title></title> <script type="text/javascript"><!-- rndnum= new Array(); rndindx= new Array(); tmpimg = new Array(); rndimg = new Array(); tmpimg[0]="***0.gif"; tmpimg[1]="***1.gif"; tmpimg[2]="***2.gif"; tmpimg[3]="***3.gif"; tmpimg[4]="***4.gif"; tmpimg[5]="***5.gif"; tmpimg[6]="***6.gif"; tmpimg[7]="***7.gif"; tmpimg[8]="***8.gif"; tmpimg[9]="***9.gif"; /* 上記でバナーに使う画像のURLを指定 */ for (i=0; i<tmpimg.length; i++){ rndimg[i]=new Image(); rndimg[i].src= tmpimg[i]; rndnum[i]=i; } for (i=0; i<tmpimg.length; i++){ n=Math.floor(Math.random()*rndnum.length); rndindx[i]=rndnum[n]; rndnum.splice(n,1); } function bannerset(){ for (j=0; j<rndimg.length; j++){ document.images["banner"+j].src=rndimg[rndindx[j]].src; } } window.onload=bannerset; //--></script> </head> <body> <img src="***0.gif" name="banner0" alt="*"><br> <img src="***1.gif" name="banner1" alt="*"><br> <img src="***2.gif" name="banner2" alt="*"><br> <img src="***3.gif" name="banner3" alt="*"><br> <img src="***4.gif" name="banner4" alt="*"><br> <img src="***5.gif" name="banner5" alt="*"><br> <img src="***6.gif" name="banner6" alt="*"><br> <img src="***7.gif" name="banner7" alt="*"><br> <img src="***8.gif" name="banner8" alt="*"><br> <img src="***9.gif" name="banner9" alt="*"> </body> </html> 上記のソースでは、ページがロードされると「name="banner*"」という属性をもっているimg要素の画像をランダムに差し替えます。 ランダムに画像を取得させても、重複が出ないような工夫を施したつもりです。 img要素は、name="banner*"という属性をつける(banner*の番号は重複させないよう気をつけて下さい)ことさえ忘れなければ、自由に配置できます。 また、バナーの数が変わる場合は、それにあわせてscript要素内のバナーに使う画像のURLを指定している部分と、name="banner*"という属性を持つimg要素の数を増減することで対処できると思います。 こちらのようなソースではいかがでしょうか。 参考になれば幸いです。 見当違いでしたら、ごめんなさい。
- dayowl
- ベストアンサー率56% (84/148)
直接の回答ではありませんが、Math.random()の使用例だけご紹介します。 <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function makeRandomNumber() { random = Math.floor(Math.random()*10+1); alert("今回発生した乱数 ＝ " + random); } // --> </script> <title></title> </head> <body> <input type="button" onClick="makeRandomNumber()" value="乱数作成！"> </body> </html> どこまでわかっていて、どこからわからないのかをもう少し詳しく書いていただけたらご協力できるかもしれません。
- nitto3
- ベストアンサー率21% (2656/12205)
配置を換えて１０個のファイルを作っておき、 Math.random()関数でそのファイルを選び表示させればいいような気がします。
お礼
早速のお返事ありがとうございます。 javascriptは検索で調べて色々使っているのですが 同じ画像が表示されないで、ランダムに表示されるようにできないのです… >Math.random()関数でそのファイルを選び表示させればいいような気がします。 スイマセン。まったくやり方がわからないんです。