• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:バナーのランダムな並べ替え)

バナーをランダムに並び替える方法

このQ&Aのポイント
  • バナーのランダムな並べ替え方法について解説します。
  • ABCDEの広告サイトバナーがあり、各サイトのバナーが3種類ずつあります。
  • リロードする度に5つのバナーの順序をランダムに並び替える方法をご紹介します。

質問者が選んだベストアンサー

  • ベストアンサー
  • nicorus
  • ベストアンサー率70% (12/17)
回答No.5

すいません。間違えてました。 これがラストアンサーです。 <script language="javascript"> var bannerSourceArray = [ {val:Math.random(),banners:[ {img:"http://A-1/A-1.gif",url:"http://A-1/"}, {img:"http://A-2/A-2.gif",url:"http://A-2/"}, {img:"http://A-3/A-3.gif",url:"http://A-3/"} ]}, {val:Math.random(),banners:[ {img:"http://B-1/B-1.gif",url:"http://B-1/"}, {img:"http://B-2/B-2.gif",url:"http://B-2/"}, {img:"http://B-3/B-3.gif",url:"http://B-3/"} ]}, {val:Math.random(),banners:[ {img:"http://C-1/C-1.gif",url:"http://C-1/"}, {img:"http://C-2/C-2.gif",url:"http://C-2/"}, {img:"http://C-3/C-3.gif",url:"http://C-3/"} ]}, {val:Math.random(),banners:[ {img:"http://D-1/D-1.gif",url:"http://D-1/"}, {img:"http://D-2/D-2.gif",url:"http://D-2/"}, {img:"http://D-3/D-3.gif",url:"http://D-3/"} ]}, {val:Math.random(),banners:[ {img:"http://E-1/E-1.gif",url:"http://E-1/"}, {img:"http://E-2/E-2.gif",url:"http://E-2/"}, {img:"http://E-3/E-3.gif",url:"http://E-3/"} ]} ]; function makeNewBannerArray( objArray , key ) { var objNewArray = new Array(); objArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} ); for(var i = 0 ; i < objArray.length; i++ ) { var banner = objArray[i].banners[Math.floor(Math.random()*objArray[i].banners.length)]; objNewArray.push({img:banner.img,url:banner.url}); } return objNewArray; } var bannerNewArray = makeNewBannerArray(bannerSourceArray , "val"); document.write('<a href="'+bannerNewArray[0].url+'"><img src="'+bannerNewArray[0].img + '"/></a>'); document.write('<a href="'+bannerNewArray[1].url+'"><img src="'+bannerNewArray[1].img + '"/></a>'); document.write('<a href="'+bannerNewArray[2].url+'"><img src="'+bannerNewArray[2].img + '"/></a>'); document.write('<a href="'+bannerNewArray[3].url+'"><img src="'+bannerNewArray[3].img + '"/></a>'); document.write('<a href="'+bannerNewArray[4].url+'"><img src="'+bannerNewArray[4].img + '"/></a>'); </script>

lnp
質問者

お礼

親切な回答有難うございます バナーコードを書き換えてスクリプトを実行した所各サイト自体のランダム抽出は出来ているのですがA~Eサイトのランダムな並び替えが出来ていませんでした。(ABCDE←固定のまま)

lnp
質問者

補足

すいませんANo.4についてお礼したつもりでしたが間違えてました。 修正されたもので実行した所うまく動作いたしました、本当に有難うございました。

その他の回答 (4)

  • nicorus
  • ベストアンサー率70% (12/17)
回答No.4

処理とビューを分けるという基本的な事をやっていませんでした。 これでどうでしょうか? <script language="javascript"> var bannerSourceArray = [ {val:Math.random(),site:"A",banners:[ {img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"}, {img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"}, {img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"} ]}, {val:Math.random(),site:"B",banners:[ {img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"}, {img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"}, {img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"} ]}, {val:Math.random(),site:"C",banners:[ {img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"}, {img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"}, {img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"} ]}, {val:Math.random(),site:"D",banners:[ {img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"}, {img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"}, {img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"} ]}, {val:Math.random(),site:"E",banners:[ {img:"http://cmm001.goo.ne.jp/img/logo/goo.gif",url:"http://www.goo.ne.jp/"}, {img:"http://cmm001.goo.ne.jp/img/sn/sn_50.gif",url:"http://oshiete.goo.ne.jp/"}, {img:"http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_answer.png?20110816_1",url:"http://c.oshiete.goo.ne.jp/kotaeru_reply.php3?q=6943673"} ]} ]; function makeNewBannerArray( objArray , key ) { var objNewArray = {A:null,B:null,C:null,D:null,E:null}; objArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} ); for(var i = 0 ; i < objArray.length; i++ ) { var banner = objArray[i].banners[Math.floor(Math.random()*objArray[i].banners.length)]; objNewArray[objArray[i].site] = {img:banner.img,url:banner.url}; } return objNewArray; } var bannerNewArray = makeNewBannerArray(bannerSourceArray , "val"); document.write('<a href="'+bannerNewArray["A"].url+'"><img src="'+bannerNewArray["A"].img + '"/></a>'); document.write('<a href="'+bannerNewArray["B"].url+'"><img src="'+bannerNewArray["B"].img + '"/></a>'); document.write('<a href="'+bannerNewArray["C"].url+'"><img src="'+bannerNewArray["C"].img + '"/></a>'); document.write('<a href="'+bannerNewArray["D"].url+'"><img src="'+bannerNewArray["D"].img + '"/></a>'); document.write('<a href="'+bannerNewArray["E"].url+'"><img src="'+bannerNewArray["E"].img + '"/></a>'); </script>

回答No.3

ぜんかくくうはくは、はんかくに。 Array.map とか、Array.reduce とかを、つかえないのなら、どこぞに。 <!DOCTYPE html> <title></title> <body> <script> var random = Math.random; var shuffle = function () { return random () < .5; }; var map = function (a) { return a[a.length * random () |0]; }; var hoge = function (ary) { return ary.sort (random).map (map); }; //_______________ var ary = [  ['a-1', 'a-2', 'a-3'],  ['b-1', 'b-2', 'b-3'],  ['c-1', 'c-2', 'c-3'],  ['d-1', 'd-2', 'd-3'],  ['e-1', 'e-2', 'e-3'] ]; //_______________ var test = hoge(ary); alert (test.join ('\n')); test = test.reduce (function (r, o, i) {  return r.concat ((! (++i % 3)) ? [o, '<br />']: o); }, []); alert (test.join ('\n')); </script>

lnp
質問者

お礼

回答有難うございます 実行内容は描いている通りなのですが動作的にアラート表示させるのではなく 表示バナーの順序を入れ替えたいと思っています。

  • nicorus
  • ベストアンサー率70% (12/17)
回答No.2

すいません。勘違いしました。 これでどうですか? <script language="javascript"> var bannerArray = [ {val:Math.random(),banners:["image/A-1.gif","image/A-2.gif","image/A-3.gif"]}, {val:Math.random(),banners:["image/B-1.gif","image/B-2.gif","image/B-3.gif"]}, {val:Math.random(),banners:["image/C-1.gif","image/C-2.gif","image/C-3.gif"]}, {val:Math.random(),banners:["image/D-1.gif","image/D-2.gif","image/D-3.gif"]}, {val:Math.random(),banners:["image/E-1.gif","image/E-2.gif","image/E-3.gif"]} ]; function sort( objArray , key ) { objArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} ); return objArray; } bannerArray = sort(bannerArray , "val"); for(var i = 0 ; i < bannerArray.length; i++ ) document.write(bannerArray[i].banners[Math.floor(Math.random()*bannerArray[i].banners.length)] + "<br/>"); </script>

lnp
質問者

お礼

スクリプトを実行した結果思い通りの結果なんですが {val:Math.random(),banners:["image/A-1.gif","image/A-2.gif","image/A-3.gif"]}, でimage/A-1.gifがバナー部分になると思いますが実際のバナーコードに置き換えると動作しませんでした。(<a href="http://example.com/a.html"><img src="http://example.com/a-1.gif"></a>) なにが問題なんでしょうか? あと改行についてですが任意の位置で改行を入れる(バナー3つおきに改行とかにしたい)ことは可能でしょうか?

  • nicorus
  • ベストアンサー率70% (12/17)
回答No.1

こんな形でどうでしょうか? <script language="javascript"> var bannerArray = [ {title:"A-1",val:Math.random(),url:"image/A-1.gif"}, {title:"A-2",val:Math.random(),url:"image/A-2.gif"}, {title:"A-3",val:Math.random(),url:"image/A-3.gif"}, {title:"A-4",val:Math.random(),url:"image/A-4.gif"}, {title:"A-5",val:Math.random(),url:"image/A-5.gif"} ]; function sort(key) { bannerArray.sort( function (b1, b2) { return b1[key] > b2[key] ? 1 : -1;} ); } sort("val"); for(var i = 0 ; i < bannerArray.length; i++ ) document.write(bannerArray[i].title + ":" + bannerArray[i].url + "<br/>"); </script>

lnp
質問者

お礼

回答有難うございます サイトごとのバナーをランダム表示するのではなく Aサイトの3つのバナーの内1つを表示 Bサイトの3つのバナーの内1つを表示 Cサイトの3つのバナーの内1つを表示 Dサイトの3つのバナーの内1つを表示 Eサイトの3つのバナーの内1つを表示 表示した5つのバナーをリロードする度に順序を入れ替えたいんです。 伝わりづらくてすいません。

関連するQ&A

専門家に質問してみよう