ランダムネットショップのページ等で何かをランダムに表示したいって場面は多いですよね。ページを表示する度に表示するバナーを変えたい。おすすめ商品として表示する商品をページが表示する度に切り替えたいなど活用したい場面は多いのではないでしょうか。いざ実装しようと考えると難しそうに思える内容ですが、実は意外と簡単に実装することが出来ます。10個から3個を表示)をランダムに表示についてサンプルソース、動作サンプルを紹介したいと思います。javascriptを使う必要がありますが、それほど難しくはありませんので、ぜひチャレンジしてみてください。スポンサードリンク画像をランダムに表示ページが読み込まれる度に表示する画像ランダムに切り替える。ネットショップに限らず、様々なサイトで使われている仕組みですね。難しそうなイメージありますが、意外と簡単に実装できるので動作サンプルと一緒にサンプルソースを紹介します。ここではid=”myplace”としています。4行目~10行目ランダムに表示したい情報をリスト化しています。このサンプルでは5つ情報を設定しています。いった形式で文字列をあらかじめ設定しています。画像とリンク先のみをリスト化したシンプルな形になりますので、必要に応じて情報付け加えてください。ランダムな数値を生成している部分、実行する度に「rNo」には違う数値セットされます。このサンプルでは、0~4のいずれかの数値が選ばれます。lists.lengthはリストの要素数を取得しています。ランダムに選ばれた数値を使って、div領域にリストの0から4番目を表示する。このサンプルでは0から4までの5パターンとなりますが、実際には準備するリスト情報数によって変わってきます。rNoには、実行する度に0から4のいずれかの数値が入るため、表示する画像を毎回変わるようになります。0~4という少ないパターン数の場合は連続して同じ画像が表示されることも多々あります。サンプル1リロードボタンを押す度にjavascriptが実行されて、表示するバナーが変わります。リンク)も同様にランダムに表示することが可能です。lists[rNo];</script>さきほどのサンプルと違うのは、あらかじめ設定するリスト化する部分の1つ1つの記述が長くなっているのと、見た目を調整しやすいようにスタイルシートを記述しているところです。画像、品名、価格などに対して<div>でそれぞれclassを指定してスタイルシートで見た目を調整しやすくしているので記述が長くなっています。サンプル2リロードボタンをクリックする度に表示する商品情報が切り替わります。やっていることはサンプル1と同じですが、リストに設定している情報が違います。ランダム表示:複数選択する場合いままで紹介したサンプルは、候補の中から1つをランダムに選択して表示するという仕組みでしたが、実際にランダム表示を使いたい場面では、10個の候補からランダムに3つ選択して表示したいなどあるかと思います。type="text/javascript">rndSet();</script></td></tr></tbody></table>このサンプルでも、リストを5つ設定しています。5つの候補から3つランダムに選択して画面上に表示してます。ポイントは10行目から15行目になります。rndSetという名前でソース内から呼び出しができる部品を設定しています。lists.spliceで1度使った内容はリストから削除しているので、複数呼び出された場合も内容の重複がされないようになっています。実際に<table><td>内で、3回rndSetを呼び出しています。呼び出した部分にリストで設定した商品情報が書き込まれる仕組みになっています。サンプル3リロードボタンをクリックする度に10個の選択肢から3つをランダムに選択して表示されます。いかがでしょうか?ランダムに何かを表示したいという場面は多いかと思います。javascriptでランダムな数値を発生させて、その数値を使って何かさせるという組み立て方になります。活用してみてください。14:28拝見させていただきました。候補を6個以上書くと表示されません。様コメントありがとうございます。>候補を6個以上書くと表示されません。最後の行だけ,(カンマ)はなし];何も表示されないとのことですので(おそらく、スクリプトのエラーによって)途中の行の,(カンマ)が抜けてしまっているのではないかと思われます。ご確認してみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。万が一問題があればご連絡ください。