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

公開日:  最終更新日:2018/03/17

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

  • 画像をランダムに表示
  • 商品情報をランダムに表示
  • 商品情報(複数選択 10個から3個を表示)をランダムに表示

についてサンプルソース、動作サンプルを紹介したいと思います。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でランダムな数値を発生させて、その数値を使って何かさせるという組み立て方になります。ぜひ、活用してみてください。

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




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑