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

 

 Web技術

例えばWebサイトにアクセスするたびに
8枚ある画像の中から4枚をランダムに表示させたい。

という時…

これができる方法をPHP、jQueryでそれぞれ見つけました。

↓アクセスするたびに変わる

↓アクセスするたびに変わる

PHPで実装する

15行目の「while($a < 4)」で
指定した数だけ<li>タグを書き出しています。
今回は4枚表示させたいので 4 と指定しています。

16行目の「rand(0,7)」の部分ですが、
要素(すべての画像の枚数)が今回は 8枚 なので(0,7)となります。
※プログラム言語では「0」から数えます。

  • 表示画像が重複しない
  • 指定数分のタグしか書き出さないのでhtmlソースがシンプルになる

jQueryで実装する

HTML

jQuery

今回はHTMLで
まず8枚分の画像すべてを読み込んでから
jQueryで4枚を非表示にしています。

ランダム表示したい要素(この場合は「<li>タグ」)を並べて、
その親の要素(この場合は「<ul>タグ」)に新しい属性 randomPh を追加し、
表示したい数を指定します。

  • 表示画像が重複しない
  • 8枚分すべてのタグを読み込んでいる

 

「作例の写真を4枚載せたいのだけれど、沢山あって選べない(^▽^;)」という時は
サイトに動きが出て良いと思います。

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

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

●PHP
https://on-ze.com/archives/460

●jQuery
https://on-ze.com/archives/451

 この記事の投稿者

iziz

iziz

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

メッセージ

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

*コメント

*名前

ページ最上部へ