[ 勉強 ] jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法

人様のソースコードを読み解くコーナーです。今回は、画像をランダムに表示させる方法です。

Java Script

$(function(){
    var setElm = $('#thumblist img'),
    delaySpeed = 100,
    fadeSpeed = 500;

    $(window).load(function(){
        randomShow();
        function randomShow(){
            var elmLength = setElm.length,
            randomSet = Math.floor(Math.random()*elmLength);

            $(setElm[randomSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
            setElm.splice(randomSet,1);

            if (elmLength > 0) {
                setTimeout(function(){randomShow();},delaySpeed);
            } else {
                return false; //全てロード終了後に処理を加える際はココに
            }
        }
    });
});

非常に勉強になったのは、やはり、画像をランダムに表示させるところですね。どういうふうにランダムに表示させているのか、ソースコードを目で追うだけではよくわからなくて、図に書いてみて漸く理解しました。

要は、ひとつランダムに画像を選択して、その画像をフェードインさせたら配列から削除、残った配列からまたひとつランダムに画像を選択して…以下ループ、なのですが、そういう考え方をするということが目から鱗でした。

私なら、ひとつの画像に対して遅延する時間を設定してからループさせるのになー、っと思って、実際にコーディングしてみたのですが、そうすると、一つの処理を完了しないと次の処理に移らないので、結局、画像の順番通りにしか表示されないんですよね。

ちょっと詳しく説明していきますね。

上のjQueryコードの10行目、これは画像の枚数分、最初は20枚ですが、1~20までの数をランダムに発生させています。
そのため、randomSetに入る数字は、1~20のどれかになります。

Java Script

    randomSet = Math.floor(Math.random()*elmLength);

続いて、12行目、ランダムに発生させた数が、例えば、17だとして、17番目の画像をフェードインさせています。

Java Script

$(setElm[randomSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);

そして、13行目、フェードインさせた画像を配列から削除します。

Java Script

setElm.splice(randomSet,1);

そして、最初に戻るのですが、すると、elmLength(画像の数)はひとつ少なくなって19となります。それから、画像の配列の順番は、削除された画像より後ろのものが、ひとつずつ前にきます。そうやって、画像が無くなるまでループしています。

この考え方は非常に面白いですね。勉強になりました!