- ベストアンサー
バナーをランダムに並び替える方法
- バナーのランダムな並べ替え方法について解説します。
- ABCDEの広告サイトバナーがあり、各サイトのバナーが3種類ずつあります。
- リロードする度に5つのバナーの順序をランダムに並び替える方法をご紹介します。
- lnp
- お礼率85% (12/14)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- nicorus
- ベストアンサー率70% (12/17)
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、はんかくに。 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>
お礼
回答有難うございます 実行内容は描いている通りなのですが動作的にアラート表示させるのではなく 表示バナーの順序を入れ替えたいと思っています。
- nicorus
- ベストアンサー率70% (12/17)
すいません。勘違いしました。 これでどうですか？ <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>
お礼
スクリプトを実行した結果思い通りの結果なんですが {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)
こんな形でどうでしょうか？ <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>
お礼
回答有難うございます サイトごとのバナーをランダム表示するのではなく Aサイトの3つのバナーの内1つを表示 Bサイトの3つのバナーの内1つを表示 Cサイトの3つのバナーの内1つを表示 Dサイトの3つのバナーの内1つを表示 Eサイトの3つのバナーの内1つを表示 表示した5つのバナーをリロードする度に順序を入れ替えたいんです。 伝わりづらくてすいません。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
親切な回答有難うございます バナーコードを書き換えてスクリプトを実行した所各サイト自体のランダム抽出は出来ているのですがA～Eサイトのランダムな並び替えが出来ていませんでした。（ABCDE←固定のまま）
補足
すいませんANo.4についてお礼したつもりでしたが間違えてました。 修正されたもので実行した所うまく動作いたしました、本当に有難うございました。