ジャンル別にランダム画像を表示させるスクリプトを探しています
- ジャンル別に画像をランダムに表示させるスクリプトを探しています。複数のジャンルにおいて、１ページで重複しないようにランダムに画像を表示させたいです。
- キーワード「javascript 複数 ランダム 表示」で検索した結果、複数の画像を重複せずに表示するスクリプトがありました。PHPでも構いません。
- ジャンルごとに異なる画像をランダムに表示させるスクリプトを探しています。１ページで複数のジャンルを表示し、画像の重複を避けたいです。
- ベストアンサー
ジャンル別にランダム画像を表示させるスクリプト
タイトルの通り、ジャンル別にランダム画像を表示させるスクリプトを探しています。 イメージとしては、ジャンルAにはA1.jpg, A2.jpg, A3.jpg...のうち一つをランダム表示。 ジャンルBにはB1.jpg,B2.jpg,B3.jpg.....のうち一つをランダムで表示。 などなど複数のジャンルにおいて、画像をランダムに、１ページで表示させたいと考えています。（添付画像ご参照ください） "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/2281)
こういう書き方もあるという事で。 この処理にいちいち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/2281)
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/2281)
「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様、ご教授願います。
関連するQ&A
- 1ページに複数ランダム画像表示で重複しないスクリプトを探しています
タイトルの通り、1ページに複数設置しても重複しないランダム画像表示スクリプトを探しています。 <img src="ランダムPHPのアドレス"><img src="ランダムPHPのアドレス"> のような感じにしても2個とも違う画像がでるものを探してます。 以前見つけたのですが失念してしまい、質問させていただくことになりました。 理想的なものは、画像のあるフォルダを指定するだけでいいものなんですが、1つ1つ画像を指定するものでも構いません。 PHPと限らずCGIでもいいです。 もし知ってらっしゃる方がいましたらよろしくお願いいたします。
- ベストアンサー
- PHP
- 画像をランダムに
JavaScript初心者です。回答していただければさいわいです。 初心者といってもタグサイトからコピペしていじくるだけの者ですが。 画像をランダムに表示したいと思いJavaScriptを使用したのですが うまく表示させることができません。 画像自体表示していないことになってしまいます。 画像を表示させたい部分に <SCRIPT language="JavaScript"> <!-- // img = new Array(); img[0] = "t/1.jpg"; img[1] = "t/2.jpg"; img[2] = "t/3.jpg"; img[3] = "t/4.jpg"; img[4] = "t/5.jpg"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> とタグをうっているのですが、なにか足りないところがあるのでしょうか？
- ベストアンサー
- JavaScript
- 画像をランダムにスクリプト
ホームページをHTMLで作成しております。画像をランダムにスクリプトしてますが、画像のサイズが大きすぎるので、HTMLでサイズ変更する場合の、HTMLをご教授ください。 width="300" height="200"を挿入でいいのでしょうか。 その場合の挿入箇所をお教えください。 現在、下記のHTMLを作成しております。 <script language="JavaScript"> <!-- var image=new Array (); image[0]="s/b/bike1.jpg" ; image[1]="s/h/hatake207.jpg"; var rnd=Math.floor(Math.random()*image.length); document.write(" <img src=' "+image[ rnd ]+ " '> "); //--> </script> 宜しくお願いします。
- 締切済み
- HTML
- 画像のランダム表示でサイズを指定する方法
ヘッダー画像を、下記のコードでランダム表示しています。 横2000px縦1000pxの画像を、横1000px縦500pxで表示したい場合、どのようにすればよいでしょうか？ <script language="JavaScript"> var imglist = new Array( "A.jpg" , "B.jpg" , "C.jpg" , "D.jpg" , "E.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> <noscript> <img src="A.jpg" alt="A.jpg" width="1000px" height="500px" border="0" /> </noscript> 上記コードの参照元：http://allabout.co.jp/gm/gc/23805/2/
- ベストアンサー
- JavaScript
- 画像リンクをランダムに４つ表示する
このようなタグを使って、画像リンクのランダム表示を作成しました。 ((hard内)) <script type="text/javascript"><!-- // var imglist = [ [ "画像1", "", "リンク先1" ] , [ "画像2", "", "リンク先2" ] ]; function RandomImageLink() { // var selectnum = Math.floor(Math.random() * imglist.length); // var output = '<a href="' + imglist[selectnum][2] + '">' + '<img src="' + imglist[selectnum][0] + '"' + ' alt="' + imglist[selectnum][1] + '"><br>' + imglist[selectnum][1] + '</a>'; // document.write(output); } // --></script> ((body内)) <script type="text/javascript"><!-- RandomImageLink(); // --></script> こうしてランダムに表示できるようになったのですが、私は『ランダムに1つ表示』ではなく、『ランダムに4つ表示』にしたいのです。 …どうすればいいのでしょうか？ どなたか回答をお願いします。
- ベストアンサー
- JavaScript
- スライド写真で２、３枚目をランダムで表示させるには
bgSwitcherを使用してフェードインアウトするスライドショーを作りました。 [A固定]→[Bランダム]→[Bランダム]→[C固定] １枚目、４枚目は指定画像に差替え表示できていますが、 ２枚目、３枚目が同じ画像を表示してしまい、繰り返し再生しても再度ランダムに選んでくれず、初めに読み込んだ画像のままでした。 【実現したいこと】 ●imgBをランダム読み込みし、２枚目、３枚目で同じ画像が選ばれないようにしたい ●2巡目以降も、再生のたびにランダム処理を実施する どなたか、上記のものが実現できるように出来ないものでしょうか。 どうぞよろしくお願いいたします。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.bgSwitcher.js" type="text/javascript"></script> <script language="javascript"> <!-- // JavaScript Document var imgA = ["images-top/A.jpg"], imgC = ["images-top/C.jpg"]; imgB = new Array(); imgB[0] = "images-top/B1.jpg"; imgB[1] = "images-top/B2.jpg"; imgB[2] = "images-top/B3.jpg"; imgB[3] = "images-top/B4.jpg"; imgB[4] = "images-top/B5.jpg"; n = Math.floor(Math.random()*imgB.length); jQuery(function($) { $('#bgSwitch-fadeOut').bgSwitcher({ images: [imgA, imgB[n], imgB[n], imgC], interval: 1000, fadeSpeed: 1000, }, true); }) --> </script> <style type="text/css"> .bg { width: 160px; height: 160px; padding: 20px; line-height: 1.6; } </style> </head> <body> <div> <div id="bgSwitch-fadeOut" class="bg"> <p>テキスト</p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- ブログ上で複数のjavaスクリプトから2つのjavaスクリプトをランダムに表示させたい
ブログ上に、複数のjavaスクリプトからランダムに２つのjavaスクリプトを選んで表示させたいのですが、コードがわからないので教えていただきたいです。選ばれた二つは被らないようにしたいです。 使用したいjavaスクリプトのコードは <script type="text/javascript" charset="euc-jp" src="○○1"></script> <script type="text/javascript" charset="euc-jp" src="○○2"></script> <script type="text/javascript" charset="euc-jp" src="○○3"></script> のようになっています。 javaを使って画像や文字をランダムに表示する方法はあったので応用しようとしたのですがうまくいきませんでした。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptで画像をランダム表示させたい
javascriptで画像をランダム表示させたいと思い、下記ソースを記述しました。 下記ソースでは、画像をランダムに1枚ずつ表示するようになっています。 今回、1枚ずつではなく、50枚ある画像を10枚ずつランダムに表示させたいと思っています。下記ソースから修整するにはどのような考え方になるのか教えていただけませんか？ 単純に、 "img/1.jpg", の部分を "img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg", としてみたのですが違うみたいですし、、。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>20110720test</title> </head> <body> <script language="JavaScript"><!-- myImageCnt = 5; myImage = new Array( "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg" ) myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで画像のランダム表示設定
いつもお世話になっております。 過去に類似した質問が挙げられてましたが、 解決に至らなかったので、 質問させて頂きます。 javascriptを使用して、 ３枚の画像をランダム表示されるように設定したいと思っております。 できれば、更新毎に常に異なる画像が表示されるようにしたいです。 ちなみに全体に適用ではなく、特定のボックスのみです。 こんな感じで現在は指定しております。 <div class="section1"> <img src="photo/xxx.jpg" alt="xxx" /> </div> ここのimgをランダム表示にしたいのですが、 どうも上手くいきません。 <script language="javascript"> <!-- // ランダムに画像を表示する img = new Array(); // 画像のアドレス img[0] = "photo/xxx.jpg"; img[1] = "photo/yyy.jpg"; img[2] = "photo/zzz.jpg"; n = Math.floor(Math.random()*img.length); document.write("<IMG src='"+img[n]+"' border='0'>"); document.write("</A>"); //--> </script> をbody内に挿入したのですが、 ダメでした。 ご指導の程宜しくお願い致します。 ちなみに当方、プログラムを自力で記述する能力が無いので、 できれば、ソースを明示して頂けると大変助かります。
- ベストアンサー
- JavaScript
- 画像のランダム表示について
スクリプトに関する質問です。 JavaScriptの「var imglist = new Array」を使って、 閲覧するたびに画像がランダムに変わるようにしたいと思います。 その場合、ランダムに変わる画像を多くしてしまうと、 いったん全部読み込むなどの理由で、ロード時間が長くなるのでしょうか？ それともロードの度にひとつだけのファイルを選ぶので変わらないのでしょうか？ こちらはたくさんの画像をランダムに表示したいと思っているのですが、 あまり重くなるようなら画像をしぼろうかと考えています。 どなたかお解かりいただければ、ご回答ください。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
お礼
fujillin 様 ご回答、そして丁寧なご説明ありがとうございます。 まさにやりたかったことはfujillin様のご回答そのものです。 参考にさせていただきます。 ご回答いただき感謝しております。ありがとうございました。