ランダムにバナー画像や商品情報を表示する[JavaScript]簡単に実装

公開日:  最終更新日:2022/08/27

バナー画像や商品情報をランダムに表示するJavaScript 意外と簡単に実装
ネットショップのページ等で何かをランダムに表示したいって場面は多いですよね。ページを表示する度に表示するバナーを変えたい。おすすめ商品として表示する商品をページが表示する度に切り替えたいなど活用したい場面は多いのではないでしょうか。
いざ実装しようと考えると難しそうに思える内容ですが、実は意外と簡単に実装することが出来ます。

についてサンプルソース、動作サンプルを紹介したいと思います。javascriptを使う必要がありますが、それほど難しくはありませんので、ぜひチャレンジしてみてください。

画像をランダムに表示

ページが読み込まれる度に表示する画像ランダムに切り替える。
ネットショップに限らず、様々なサイトで使われている仕組みですね。
結構難しそうなイメージありますが、意外と簡単に実装できるので動作サンプルと一緒にサンプルソースを紹介します。

画像ランダム表示サンプルソース

サンプルソース sample1.html

<div id="myplace"></div>
 
<script type="text/javascript">
var lists=[
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>',
'<a href="リンク先URL"><img src="画像URL"></a>'
];
 
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('myplace').innerHTML = lists[rNo];
</script>

1行目 画像を表示する領域 ここではid=”myplace”としています。

4行目~10行目
ランダムに表示したい情報をリスト化しています。このサンプルでは5つ情報を設定しています。
‘ 情報1 ‘ , ‘ 情報2 ‘ , ‘ 情報3 ‘ ・・・ といった形式で文字列をあらかじめ設定しています。
また、画像とリンク先のみをリスト化したシンプルな形になりますので、必要に応じて情報付け加えてください。例)リンクの属性 target=”_top” など

12行目 ランダムな数値を生成している部分、実行する度に「rNo」には違う数値セットされます。
このサンプルでは、0~4のいずれかの数値が選ばれます。lists.lengthはリストの要素数を取得しています。

13行目 ランダムに選ばれた数値を使って、div領域にリストの0から4番目を表示する。このサンプルでは0から4までの5パターンとなりますが、実際には準備するリスト情報数によって変わってきます。

rNoには、実行する度に0から4のいずれかの数値が入るため、表示する画像を毎回変わるようになります。もちろん、0~4という少ないパターン数の場合は連続して同じ画像が表示されることも多々あります。

動作サンプル サンプル1


リロードボタンを押す度にjavascriptが実行されて、表示するバナーが変わります。


商品情報をランダムに表示

さきほどの、サンプルではあらかじめ設定しておくリスト情報としてリンク、画像しか設定していませんでしたが、リンクと画像が出来るのであれば少し記述が長くなりますが、商品情報(商品画像、品名、価格、リンク)も同様にランダムに表示することが可能です。

商品情報ランダム表示サンプルソース サンプル2

サンプルソース sample2.html

<style type="text/css">
div.itemimage{
text-align:center;
width:120px;
}
div.itemname{
font-size:12px;
padding:0px;
color:#1c4587;
width:120px;
text-align:center;
}
div.itemprice{
font-size:12px;
padding:0px;
color:#000;
width:120px;
text-align:right;
}
div.itemname a{
color:#1c4587;
font-style:normal;
text-decoration:underline;
}
a img{
border-style:none;
padding:0px;
}
</style>
<div id="myplace"></div>
 
<script type="text/javascript">
var lists=[
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト1・・・</a></div><div class='itemprice'>1,278円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト2・・・</a></div><div class='itemprice'>600円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト3・・・</a></div><div class='itemprice'>2,100円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト4 ・・・</a></div><div class='itemprice'>1,158円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト5 ・・・</a></div><div class='itemprice'>1,998円</div>"
];
 
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('myplace').innerHTML = lists[rNo];
</script>

さきほどのサンプルと違うのは、あらかじめ設定するリスト化する部分の1つ1つの記述が長くなっているのと、見た目を調整しやすいようにスタイルシートを記述しているところです。
各要素 画像、品名、価格などに対して<div>でそれぞれclassを指定してスタイルシートで見た目を調整しやすくしているので記述が長くなっています。

動作サンプル サンプル2


リロードボタンをクリックする度に表示する商品情報が切り替わります。やっていることはサンプル1と同じですが、リストに設定している情報が違います。


ランダム表示:複数選択する場合

いままで紹介したサンプルは、候補の中から1つをランダムに選択して表示するという仕組みでしたが、実際にランダム表示を使いたい場面では、10個の候補からランダムに3つ選択して表示したいなどあるかと思います。

サンプルソース サンプル3

サンプルソース sample3.html

cssは省略
 
<script type="text/javascript">
var lists=[
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト1・・・</a></div><div class='itemprice'>1,278円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト2・・・</a></div><div class='itemprice'>600円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト3・・・</a></div><div class='itemprice'>2,100円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト4 ・・・</a></div><div class='itemprice'>1,158円</div>",
"<div class='itemimage'><a href='リンクURL'><img src='画像URL'></a></div><div class='itemname'><a href='リンクURL' target='_top'>商品名テスト5 ・・・</a></div><div class='itemprice'>1,998円</div>"
];
 
function rndSet(){
  var rNo = Math.floor(Math.random() * lists.length);
  document.write(lists[rNo]);
  lists.splice(rNo,1);
}
</script>
 
<table><tbody><tr><td><script type="text/javascript">rndSet();</script></td><td><script type="text/javascript">rndSet();</script></td><td><script type="text/javascript">rndSet();</script></td></tr></tbody></table>

このサンプルでも、リストを5つ設定しています。
そして、5つの候補から3つランダムに選択して画面上に表示してます。

ポイントは10行目から15行目になります。
rndSetという名前でソース内から呼び出しができる部品を設定しています。

13行目 document.writeで画面上に書き込む処理

14行目 lists.spliceで1度使った内容はリストから削除しているので、複数呼び出された場合も内容の重複がされないようになっています。

そして、実際に<table><td>内で、3回rndSetを呼び出しています。
呼び出した部分にリストで設定した商品情報が書き込まれる仕組みになっています。

動作サンプル サンプル3


リロードボタンをクリックする度に10個の選択肢から3つをランダムに選択して表示されます。


いかがでしょうか?ランダムに何かを表示したいという場面は多いかと思います。javascriptでランダムな数値を発生させて、その数値を使って何かさせるという組み立て方になります。ぜひ、活用してみてください。

【ランダムに関する関連記事】




Comment

  1. 海野 より:

    拝見させていただきました。
    候補を6個以上書くと表示されません。
    100個以上候補、15個程度の表示にしたいのですが、どうやればいいですか?

    • peacepopo より:

      海野 様

      コメントありがとうございます。

      >候補を6個以上書くと表示されません。
      >100個以上候補、15個程度の表示にしたいのですが、どうやればいいですか?

      サンプル3のことだと思われますが、行の最後の,(カンマ)は間違っていないでしょうか?

      var lists=[
      “タグ内容1”,  → 各行の最後に,(カンマ)が必要
      “タグ内容2”,
      “タグ内容3”,
      “タグ内容4”,
      “タグ内容5″   → 最後の行だけ,(カンマ)はなし
      ];

      例)100個に増やした場合
      var lists=[
      “タグ内容1”,  → 各行の最後に,(カンマ)が必要
      “タグ内容2”,
      “タグ内容3”,
       ・
       ・
       ・
      “タグ内容98”,
      “タグ内容99”,
      “タグ内容100″   → 最後の行だけ,(カンマ)はなし
      ];

      何も表示されないとのことですので(おそらく、スクリプトのエラーによって)
      途中の行の,(カンマ)が抜けてしまっているのではないかと思われます。

      ご確認してみてください。

  2. ono より:

    ランダム表示の複数選択を横ではなく縦にしたい場合はどのようになりますでしょうか?

    • peacepopo より:

      ono 様
      コメントありがとうございます。
      サンプルソース3を縦にしたいというのであれば、table tr td の構造を縦に変更すれば縦に表示されます。
      下記のようなイメージ (table tr tr が良くわからなければ htmlタグについて調べてみてください。)
      1行3列 になっているのを 
      tr td /td td /td td /td /tr

      3行1列に変更する。
      tr td /td /tr
      tr td /td /tr
      tr td /td /tr

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑