画像の一覧をランダムでフェードインさせるサンプルです。
なかなか使いどきは難しいかもしれませんが、視覚的な効果は発揮すると思います。
しかも割と基礎的な考え方で出来てしまいますので、早速書いてみます！
jQueryでランダムに画像（要素）をフェードインさせるサンプル
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <section id=“random_preview”> <ul> <li><img src=“images/s/header-samples_ok.png” height=“91” width=“79” ></li> <li><img src=“images/s/header-samples_warikan.png” height=“141” width=“160” /></li> <li><img src=“images/s/header-samples_fukkatsu.png” height=“127” width=“144” alt=“”></li> <li><img src=“images/s/header-samples_fuck.png” height=“129” width=“152” alt=“”></li> <li><img src=“images/s/header-samples_gahn.png” height=“139” width=“138” alt=“”></li> <li><img src=“images/s/header-samples_naruhodo.png” height=“109” width=“131” alt=“”></li> <li><img src=“images/s/header-samples_rakka.png” height=“79” width=“98” alt=“”></li> <li><img src=“images/s/header-samples_go.png” height=“77” width=“84” alt=“”></li> <li><img src=“images/s/header-samples_potsun.png” height=“100” width=“112” alt=“”></li> <li><img src=“images/s/header-samples_pinchi.png” height=“118” width=“133” /></li> <li><img src=“images/s/header-samples_genkai.png” height=“151” width=“133” alt=“”></li> <li><img src=“images/s/header-samples_dash.png” height=“117” width=“111”></li> </ul> </section> |
これは別にulとliの関係でなくても、divとpでも良いです。
が、セマンティックな（意味のある）コーディングを意識すると、だいたいのケースは必然的に上記のようにリストタグで囲むことになると思います。
CSS
1 2 3 4 5 6 7 8 9 | img{max–width: 100%; height: auto;} #random_preview{ width:60%; margin: 0 auto; } li{ display: inline–block; list–style–type: none; } |
関係してくるのは、liのスタイリングぐらいでしょうか。
floatでも良いし、場合によってはposition:absoluteでランダムに配置してもいいですよね。其の際は別途CSSでの指定が必要です。
では、jQueryを使って実装します。
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | ///////////////////////// //サムネイルをランダムで出す (順番どおり) ///////////////////////// $(function(){ var fadeInImg = $(‘#random_preview img’); //フェードインする画像 fadeInImg.css({ ‘display’ : ‘none’ , ‘opacity’ : 0 }); delaySpeed = 200;//時間差 fadeSpeed = 500;//フェードインにかかる時間 $(window).on(‘load’ , function(){ randomShow();//実行 function randomShow(){ var num = fadeInImg.length;//要素数 randomNum = Math.floor(Math.random() * num); //要素数を最大としてランダムに数値を吐く $(fadeInImg[randomNum]).css({ ‘display’ : ‘block’ , }).animate({ ‘opacity’ : 1 } , fadeSpeed); fadeInImg.splice(randomNum , 1); //配列fadeInImgをランダムに1つずつ削除していく //関数randomShadowの中で関数randomShadowを呼んでいる。 //これによりspliceの除外が重なり、徐々に配列fadeInImgの要素数が減る。 //すると、それが擬似的にデクリメントのようになって下の結果が適用される if(num > 0){ setTimeout(function(){ randomShow(); } , delaySpeed); }else{ return false; } } }); }); |
HTMLと照らしあわせて見てみてください。
まず最初にフェードインさせたい画像を取得し変数に入れます。ちなみにこれは配列になっています。
それに、jQueryを使ってCSSを指定します。displayとopacityの、ダブル非表示攻撃です。
少し下から関数を定義しにいきます。
今回はrandowShow()がそれなのですが、画面を読み込み終わった瞬間に実行されるように.on(‘load’ , function(){~})としています。
関数randomShowでは何をしているのか
今回重要なのは、「ランダム」だということです。
1 | randomNum = Math.floor(Math.random() * num); //要素数を最大としてランダムに数値を吐く |
この部分ですが、変数numはフェードインさせたい画像の枚数です。1行うえで、配列fadeInImgに対して、lengthで取得しています。
これにMath.floorを使い、（フェードインさせたい画像）要素数を最大としてランダムな整数を作りrandomNumに代入していきます。
Math.floor() – JavaScript | MDN
Math.random() – JavaScript | MDN
次の$(fadeInImg[randomNum]).css({～….animate({})で、アニメーション後の状態を書きます。
今回の場合は非表示だった要素のdisplayをblockにします。opacityの値はアニメーション可能なので、animateに書きましょう。
ちなみにfadeInImg[randomNum]部分が、ランダムで画像を取り出しています。
次がキモです。
fadeInImg.splice(randomNum , 1);
簡単に言うと、配列fadeInImgの値を、spliceを使ってランダムで1つずつ減らしています。
Array.splice – JavaScript | MDN
さらにさらに。
その次が超キモです。
if(num > 0){～}
これはどういうことかというと、numというのはフェードインさせたい画像の枚数でした。
これが0より大きい場合に、中の処理が行われます。
中では、なんとこの関数自体が呼ばれています。
関数の中で、その関数が呼ばれている状態です。
これはsetTimeoutで時間差を付けて実行されます。
一定時間で繰り返す（setTimeout）－JavaScript入門
実は変数numの値（フェードインさせたい画像の枚数）ですが、これは変わります。
というのも、少し上でfadeInImg.splice(randomNum , 1);が実行されているため、
関数randomImage()が実行される度に、配列fadeInImg自体の要素数が減っていくのです。
ここは関数の中で関数を呼ぶことで、フェードインさせたい画像の枚数分だけ処理が適用されることとなります。
そのため、やがて値（配列の数）が0になるのですね。
条件に当てはまらない場合、つまりspliceで配列が空になってしまった場合はreturnします。
個人的な都合で、画面更新をしたときに要素の順序がバラバラになったほうが良かったので、そちらも実装してみます。
数行のコードを足すだけです。
jQueryでランダムに画像（要素）をフェードインさせ、読み込むたびに順番もランダムにするサンプル
HTMLとCSSは同じものだとします。jQueryサンプルにコードを足しましょう。
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | ///////////////////////// //サムネイルをランダムで出す (リロード後にシャッフル) ///////////////////////// $(function(){ ///↓追記ここから var list = $(‘#random_preview li’); //個々 var area = $(‘#random_preivew ul’); //表示したい場所 array = [];//配列 list.each(function(){ array.push($(this).html); //リストタグ中のHTMLを抜き出し配列に格納 }); array.sort(function(){ return Math.random() – Math.random(); }); area.empty();//エリアをまっさらに for(i = 0; i < array.length; i++){ //カラになっているはずのareaにappend area.append(‘<li>’ + array[i] + ‘</li>’); } ///↑追記ここまで var fadeInImg = $(‘#random_preview img’); //フェードインする画像 fadeInImg.css({ ‘display’ : ‘none’ , ‘opacity’ : 0 }); delaySpeed = 200;//時間差 fadeSpeed = 500;//フェードインにかかる時間 $(window).on(‘load’ , function(){ randomShow();//実行 function randomShow(){ var num = fadeInImg.length;//要素数 randomNum = Math.floor(Math.random() * num); //要素数を最大としてランダムに数値を吐く $(fadeInImg[randomNum]).css({ ‘display’ : ‘block’ , }).animate({ ‘opacity’ : 1 } , fadeSpeed); fadeInImg.splice(randomNum , 1); //配列fadeInImgをランダムに1つずつ削除していく //関数randomShadowの中で関数randomShadowを呼んでいる。 //これによりspliceの除外が重なり、徐々に配列fadeInImgの要素数が減る。 //すると、それが擬似的にデクリメントのようになって下の結果が適用される if(num > 0){ setTimeout(function(){ randomShow(); } , delaySpeed); }else{ return false; } } }); }); |
///↓追記ここから ～ ///↑追記ここまで
が、さきほどのサンプルとの違いです。
さらっとまとめると、フェードインさせたい要素を配列に逃がして、順番を変えて同じ場所に入れなおしているのです。
まずはじめの
1 2 | var list = $(‘#random_preview li’); //個々 var area = $(‘#random_preivew ul’); //表示したい場所 |
は、メモしてあるとおり、要素を入れる場所と個々の要素を含むリストです。
そのすぐ下に新しく空の配列を作り、その中に、変数list（個々の要素を含むリスト）の中のHTMLをeachで1つずつ、配列にpushします。
1 2 3 | list.each(function(){ array.push($(this).html); //リストタグ中のHTMLを抜き出し配列に格納 }); |
ここ。
$(this)はeachで処理中の要素です。
その下のsort()で、配列に格納したあれこれの順番をランダムにします。
Array.sort – JavaScript | MDN
そのあとはemptyを使って、もともと要素があった場所を空にします。もう配列に入っているので用済みです。
.empty() | jQuery 1.9 日本語リファレンス | js STUDIO
さいごに、配列の要素の数だけfor()でループ処理。それを利用して、変数area（表示したい場所）に入れ込んで終了です。
すでにarray.sort()のところで配列はランダムになっているので、for()中では特別な処理はしていません。
ランダムで画像がフェードインしてくるサンプル（リロードする度に順番が変わる）
以上。
でわ！
