小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQuerで要素のランダム表示を実装

  • 公開日：2020-07-04
  • 最終更新日：2020-08-04

「東洋堂」のランディングページ制作に携わった際に使用したランダムでの画像表示の実装方法をメモ。
アクセスすたびに画像の表示順序が変わるので、コンテンツが単調になりにくく、また一点づつ表示されるので、一度に全ての商品を見せるよりも印象付けることができる。

HTML

<ul class="mainimage__list">
	<li class="mainimage__list__item"><img src="画像URL"></li>
	<li class="mainimage__list__item"><img src="画像URL"></li>
	<li class="mainimage__list__item"><img src="画像URL"></li>
	<li class="mainimage__list__item"><img src="画像URL"></li>
	<li class="mainimage__list__item"><img src="画像URL"></li>
</ul>

jQuery

var $list = $('.mainimage__list__item');
var showlist = [];
$list.each(function(i) {
	showlist.push(i);
});
	
showlist.sort(function() {
	return Math.random() - Math.random();
});
	
$('.mainimage__list__item').css({opacity:0});
$list.css({opacity: 0}).each(function(i){
	$(this).delay(showlist[i] * 500)
	.animate({opacity: 1}, 500);
});

「each」を使用して、表示する画像のリスト（通し番号）を配列に保存。
保存した配列を「sort」を使ってランダムに入れ替える。
入れ替えの完了した配列を「animate」を使って表示。
表示までの待ち時間は「delay」で指定。