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

公開日:  最終更新日:2015/06/10

この記事のタイトルとURLをコピーする

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

  • 画像をランダムに表示
  • 商品情報をランダムに表示
  • 商品情報(複数選択 10個から3個を表示)をランダムに表示
  • についてサンプルソース、動作サンプルを紹介したいと思います。

    スポンサードリンク

    画像をランダムに表示

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

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

    サンプルソース 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のいずれかの数値が選ばれます。

    13行目 ランダムに選ばれた数値を使って、div領域にリストの○番目を表示する

    動作サンプル サンプル1


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

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

    商品情報ランダム表示サンプルソース サンプル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つをランダムに選択して表示するという仕組みでしたが、実際にランダム表示を使いたい場面では、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


    いかがでしょうか?ランダムに何かを表示したいという場面は多いかと思います。
    ぜひ、活用してみてください。

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

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

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

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

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

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

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

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

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

ヒートマップ分析も出来る無料のアクセス解析

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

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

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

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

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

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

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

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

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

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

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

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

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

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑