アクセスするたびにランダムですべての画像を並び替え表示させたい

 

 Web技術

ランダム画像表示シリーズ第2弾です。

「アクセスするたびにランダムで画像を複数表示させたい」

では

「設定した数だけ画像を取り出しランダムに表示させる。」

という動きでしたが
今回は

すべての画像を取り出しランダムに表示させる。」

という動きになります。

「アクセスするたびにランダムで画像を複数表示させたい」のプログラムでも
画像のすべてをランダム表示させることは可能です。
ですが
画像を増やすたびにプログラム内の数値などを変更しなければならないため
今回のプログラムの方が画像を追加するには便利です。

HTML

JavaScript

  • 数を増やしたい時は<li>タグで追加すればOK

 

========================

このプログラムを使用して表示数制限をしたい場合は
CSSの「:nth-child()」を使用します。

例:4枚表示の場合
「ul li:nth-child(n+5) {display: none;}」
上記のようにして
5番目以降は表示を隠すようにします。

========================

▼参考にさせていただきました。ありがとうございます。

https://nakazilab.com/page-reload-random-elements/

 この記事の投稿者

iziz

iziz

Webデザイナー&HTMLコーダーときどきイラストレーター。
  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

ページ最上部へ