更新するたびにバナーや画像をランダム表示する方法
2020.03.03
みなさま、こんにちは。
突然ですが、私はカルーセル(スライダー)があまり好きではありません(本当に突然ですが……)。
カルーセルがとても人気なことは知っています。
制作の依頼がくるときも「画像くるくる回る」を導入してほしいといわれることもたびたび。
確かにカルーセルがあるだけでそれっぽいサイトが作れますよね。
そういった意味では非常に使い勝手のいいカルーセルですが、
- ユーザーの意に反して動く
- 順番的に後ろの方に置かれた画像は日の目を見ない
そして上記内容と重なるのですが、
カルーセルのクリック率はサイト訪問者の1%と言われ、そのうち84%が最初の画像をクリックしているとのデータもあります。
実際web業界でもカルーセルのデメリットは言われ続け、カルーセルについて否定的な記事が溢れています。
「でも複数のコンテンツを紹介したい」
そんな時はランダム表示を検討してみてください。
更新するたびに画像がランダム表示!
まず参考までに下記サイトをご覧いただき、何回か更新をしてみてください。
ヘッダー画像がランダムに表示されることが確認できますでしょうか。
表示コンテンツに優先順位がつけられない点ではカルーセルに劣りますが、回遊しているお客様へ、平等に、コンテンツをストレスなく見せれますので、ぜひ実装してみてください。
画像ランダム表示の実装方法
まずはソースを書きますので、「もう時間がないっ!」という人はこちらをコピペしてみてください。
1 2 3 4 5 6 7 8 9 |
$(function () { var sorceList = [ '任意の画像', '任意の画像', '任意の画像' ]; var random = Math.floor(Math.random() * sorceList .length); $('.js-random').append(sorceList [random]); }); |
HTMLの「js-random」というクラスを付与したブロックの中に表示されますよ。
それでは詳細を解説していきますので、仕組みが知りたい方は読んでみてください。
表示させたいソースを定義する
まずは表示させたいソースを定義してください。
ランダム表示ですので、とうぜん複数個になるかと思います。
1 2 3 4 5 |
var sorceList = [ '任意の画像', '任意の画像', '任意の画像' ]; |
ランダムで表示されるソースを定義する
次に、ランダム表示されるソースを定義してください。
ここがランダム表示の肝になりますので、解説していきますね。
1 |
var random = Math.floor(Math.random() * sorceList .length); |
上記ソースを解剖していくと、
Mathオブジェクトのfloor()メソッドは、小数点以下を切り捨てるという意味で、「Math」オブジェクトの「random()」メソッドはランダム値を生成するために使います。
そして「.length」プロパティで、配列の中の要素数を取得しました。
それを踏まえて先のソースを日本語に翻訳すると、
「sorceList の数を取得し、ランダムで返す。その際、少数点以下は切り捨てる」
となりました。
「js-random」クラス内に表示する
ここまでくれば後は表示するだけですので、
1 |
$('.js-random').append(sorceList [random]); |
「js-random」内にsorceList で定義したソースの[random]番目を表示するとなります。
完成版はこれ
See the Pen
OJVmjmg by sank (@sank_f)
on CodePen.
最後に完成版を置いておきますので、ご確認ください。
最もわかりにくそうなランダム値をコンソールで書き出しましたので、デベロッパーツールを活用しつつ確認してみてください。
確認できましたでしょうか?
コンソールで0が出てるときは、青。
コンソールで1が出てるときは、赤。
コンソールで2が出てるときは、緑になります。
ココナラでwebに関する質問に回答するサービスを出品しておりますので、もしよろしければ覗いてみてください。