- ベストアンサー
ジャンル別にランダム画像を表示させるスクリプトを探しています
- ジャンル別に画像をランダムに表示させるスクリプトを探しています。複数のジャンルにおいて、１ページで重複しないようにランダムに画像を表示させたいです。
- キーワード「javascript 複数 ランダム 表示」で検索した結果、複数の画像を重複せずに表示するスクリプトがありました。PHPでも構いません。
- ジャンルごとに異なる画像をランダムに表示させるスクリプトを探しています。１ページで複数のジャンルを表示し、画像の重複を避けたいです。
- 087_x
- お礼率75% (3/4)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
HTMLが不明ですが、基本的には#1のお礼の考え方でもできるはずです。 ただし、#2様の回答にもあるように、 window.onload = function(){ ～～ window.onload = function(){ ～～ を繰り返さすと、毎回上書きされてしまいますので、最後のものしか有効になりません。 処理を少しまとめて、id="hoge"直下のdiv要素に順に背景を設定する一例。 （数はいくつでもかまいません） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #hoge { width:800px; } #hoge div { width:400px; height:300px; float:left; } //--> </style> <script type="text/javascript"> <!-- window.onload = function(){ var setBGImage = (function(){ var div = document.getElementById("hoge").childNodes; var divs = []; var i; for(i=0; i<div.length; i++) if(div[i].nodeName == "DIV") divs.push(div[i]); i = 0, div = null; return function(list){ if(!divs[i]) return; var images = list.split(","); var n = Math.floor(Math.random() * images.length); divs[i++].style.backgroundImage = "url(" + images[n] + ")"; } }()); setBGImage("A1.jpg,A2.jpg,A3.jpg,A4.jpg"); setBGImage("B1.jpg,B2.jpg,B3.jpg,B4.jpg"); setBGImage("C1.jpg,C2.jpg,C3.jpg"); setBGImage("D1.jpg,D2.jpg,D3.jpg"); } //--> </script> </head> <body> <div id="hoge"> <div>categoryA</div> <div>categoryB</div> <div>categoryC</div> <div>categoryD</div> </div> </body> </html>
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
こういう書き方もあるという事で。 この処理にいちいちnewは無いだろうと思いつつ。。。個人的にこういう作り方が主流なので。 <script> (function(){ function Change(args){ this.el=(typeof args[0]==='string')?document.getElementById(args[0]):args[0]; this.srcs=args.slice(1); this.setImage(); } Change.prototype={ randomImg: function(){ return this.srcs[ Math.floor(Math.random() * this.srcs.length) ]; }, setImage: function(){ this.el.style.backgroundImage='url('+this.randomImg()+')'; } } window.onload=function(){ var cates=[ ['Acategory', 'A1.jpg', 'A2.jpg', 'A3.jpg'], ['Bcategory', 'B1.jpg', 'B2.jpg', 'B3.jpg'], ['Ccategory', 'C1.jpg', 'C2.jpg', 'C3.jpg'], ['Dcategory', 'D1.jpg', 'D2.jpg', 'D3.jpg'] ]; for( var i=0, cate; cate=cates[i]; i++ ){ new Change(cate); } }; /* window.onload=function(){ var cates=[ ['A1.jpg', 'A2.jpg', 'A3.jpg'], ['B1.jpg', 'B2.jpg', 'B3.jpg'], ['C1.jpg', 'C2.jpg', 'C3.jpg'], ['D1.jpg', 'D2.jpg', 'D3.jpg'] ]; var divs=document.getElementById('container').getElementsByTagName('div'); for( var i=0, div; div=divs[i]; i++ ){ cates[i].unshift(div); } for( var i=0, cate; cate=cates[i]; i++ ){ new Change(cate); } }; */ //------------------------------ function Change2(el, srcs){ this.el=(typeof el==='string')?document.getElementById(el):el; this.srcs=srcs; this.setImage(); } Change2.prototype={ randomImg: function(){ return this.srcs[ Math.floor(Math.random() * this.srcs.length) ]; }, setImage: function(){ this.el.style.backgroundImage='url('+this.randomImg()+')'; } } window.onload=function(){ var cates=[ ['A1.jpg', 'A2.jpg', 'A3.jpg'], ['B1.jpg', 'B2.jpg', 'B3.jpg'], ['C1.jpg', 'C2.jpg', 'C3.jpg'], ['D1.jpg', 'D2.jpg', 'D3.jpg'] ]; var divs=document.getElementById('container').getElementsByTagName('div'); for( var i=0; i<cates.length; i++ ){ new Change2(divs[i], cates[i]); } }; })(); </script> <div id="container"> <div id="Acategory"></div> <div id="Bcategory"></div> <div id="Ccategory"></div> <div id="Dcategory"></div> </div> （未検証です。HTML部分は同じで、３パターンです。） --------------- http://okwave.jp/qa/q7548901.html 手続き型とOOPでは作り方がまるで違うので、勉強したい方を勉強すればいいと思います。 JavaScriptではクロージャーが有効に使えますので、また違った作り方（No.3)になると思います。 No.1、No.2のは手続き型です。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
window.onload=function(){} という形でonloadを書き換えると、最後に代入したものしか実行されません。 ----------- function A(){ //Aカテゴリーの内容を表示する処理 } function B(){ //Bカテゴリーの内容を表示する処理 } function C(){ //Cカテゴリーの内容を表示する処理 } function D(){ //Dカテゴリーの内容を表示する処理 } window.onload=function(){ A(); B(); C(); D(); } ------------------ 同じような記述は ループや関数化などを駆使して、もうちょっと工夫してみてください。
お礼
taloo様 引き続き、ご回答ありがとうございます。 なるほど、どんどん上書きになっていくのですね・・ 大変参考になりました。ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
「javascript ランダム 表示」で検索してみてください。
お礼
早速のご回答ありがとうございました。 そちらの検索ワードでも調べ、ランダムの記述を試みているのですが、うまくいきません。 変数というのでしょうか、そこを変えればうまくいくかと思い下記のように記述しました。 <script type="text/javascript"> window.onload = function(){ var Acate=[]; Acate[0] = 'A1.jpg'; Acate[1] = 'A2.jpg'; Acate[2] = 'A3.jpg'; var n = Math.floor(Math.random() * Acate.length); var elm = document.getElementById('Acategory'); elm.style.backgroundImage = 'url(' + Acate[n] + ')'; } </script> <script type="text/javascript"> window.onload = function(){ var Bcate=[]; Bcate[0] = 'B1.jpg'; Bcate[1] = 'B2.jpg'; Bcate[2] = 'B3.jpg'; var n = Math.floor(Math.random() * Bcate.length); var elm = document.getElementById('Bcategory'); elm.style.backgroundImage = 'url(' + Bcate[n] + ')'; } </script> ・ ・ ・ 現段階ではこのような感じです。 考え方が違うのかなと思いました。 ご存知でしたら、taloo様、ご教授願います。
お礼
fujillin 様 ご回答、そして丁寧なご説明ありがとうございます。 まさにやりたかったことはfujillin様のご回答そのものです。 参考にさせていただきます。 ご回答いただき感謝しております。ありがとうございました。