アクセスするたびにランダムですべての画像を並び替え表示させたい
ランダム画像表示シリーズ第2弾です。
では
「設定した数だけ画像を取り出しランダムに表示させる。」
という動きでしたが
今回は
「すべての画像を取り出しランダムに表示させる。」
という動きになります。
「アクセスするたびにランダムで画像を複数表示させたい」のプログラムでも
画像のすべてをランダム表示させることは可能です。
ですが
画像を増やすたびにプログラム内の数値などを変更しなければならないため
今回のプログラムの方が画像を追加するには便利です。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul id="randomList"> <li><img src="./images/random01.jpg" /></li> <li><img src="./images/random02.jpg" /></li> <li><img src="./images/random03.jpg" /></li> <li><img src="./images/random04.jpg" /></li> <li><img src="./images/random05.jpg" /></li> <li><img src="./images/random06.jpg" /></li> <li><img src="./images/random07.jpg" /></li> <li><img src="./images/random08.jpg" /></li> </ul> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { var box = []; $('ul#randomList li').each(function() { box.push($(this).html()); }); box.sort(function() { return Math.random() - Math.random(); }); $('ul#randomList li').empty(); var i = 0; $('ul#randomList li').each(function() { $(this).append(box[i]); i++; }); }); |
- 数を増やしたい時は<li>タグで追加すればOK
========================
このプログラムを使用して表示数制限をしたい場合は
CSSの「:nth-child()」を使用します。
例：4枚表示の場合
「ul li:nth-child(n+5) {display: none;}」
上記のようにして
5番目以降は表示を隠すようにします。
========================
▼参考にさせていただきました。ありがとうございます。
この記事の投稿者
iziz
Webデザイナー&HTMLコーダーときどきイラストレーター。
