jQuery を使って複数の画像を順番に表示する

CATEGORY: jQuery

2013年4月26日

jQuery の「fadeIn メソッド」等のアニメーションのメソッドを使って複数の画像を順番に表示する方法。

この例では、1つの画像から複数の画像要素を生成して、それらを順番にCSS プロパティで位置を指定し、「fadeIn メソッド」を使って表示する。

fadeIn(speed,callback) 等のアニメーションのメソッドの callback パラメータはアニメーション完了時に呼び出される関数を指定できるので、このパラメータを利用。

serial_fadeIn() という関数を作成して、その中で「fadeIn メソッド」を使って serial_fadeIn() を再帰的（？）に呼び出し、ある数（maxCount）に達したら「return」で抜け出るというもの。

imgx$ は画像要素のラップ集合で、この関数を実行する前に生成しておく。

以下は作成するserial_fadeIn() という関数の概要で、このままでは位置の指定が「count * 10 」なので斜め一列に表示される。

count = 0;
function serial_fadeIn(maxCount) {
    if(count==maxCount) return;
    $(imgx$[count]).css({top: count * 10 + 'px', left: count * 10 + 'px'}).fadeIn( 100,  function(){
      count ++;
      serial_fadeIn(maxCount);
    });    
}

画像と表示する領域を用意する

画像を作成して images フォルダに配置する。
この例では画像名は「leaf.png」で高さは「20」、幅は「22」

表示する領域は div 要素として id 属性を「div#leafimage」と指定。

画像を生成する関数の作成

パラメータに生成する画像の数、画像名、高さ、幅、表示する div 要素をパラメータに取り、その画像のラップ集合を返す関数を以下のように作成。

各画像要素は「display: ‘none’, position: ‘absolute’」を指定。
親要素の表示領域は「’position’, ‘relative’」を指定。

function create_images(count, name, h, w,  target) {
  for(i = 0; i < count ; i++){
        $('<img />', { src: 'images/' + name,  alt: '',height: h,width: w}).css({display: 'none', position: 'absolute' }).appendTo(target);  
  }
  $(target).css('position', 'relative');
  return $(target).find('img');
}

画像をランダムに配置するために乱数を生成する関数を作成

以下の関数は重複のない乱数の配列を返す。（詳細はこちら）

function generate_randomx(count) {
  var generated = new Array();
  var generatedCount = generated.length;
  for(i = 0 ; i < count; i++){
    var candidate = Math.floor(Math.random() * count);
    //今まで出力された数字と同じ場合は再度乱数を発生
    for(j = 0; j < generatedCount; j++) {
      if(candidate == generated&#91;j&#93;){
        candidate = Math.floor(Math.random() * count);
        j= -1;
      }
    }
    generated&#91;i&#93; = candidate;  
    generatedCount++;
  }
  return generated;  
}
&#91;/code&#93;
<h3>作成した関数を利用して画像を表示</h3>
再帰を抜け出すための変数「count 」を外側で初期化。
画像30個のラップ集合を生成。
0 から 30 までの乱数の配列を生成。
serial_fadeIn()で30個の画像をランダムに表示。
serial_fadeIn()のパラメータには画像のラップ集合と乱数の配列を取るように修正。
全て表示したら、「imgx$.fadeOut(1000);」で画像を非表示に。他のアニメーションを連続して実行するには、fadeOut()の callback パラメータに更にアニメーションなどの関数を指定する。


count = 0;
imgx$ = create_images(30, 'leaf.png',20, 22,'div#leafimage' ); 
randomx = generate_randomx(30);
serial_fadeIn(imgx$, randomx);

function serial_fadeIn(img$, rand) {
  //count が 画像要素の総数に達したら、画像をフェードアウトして終了
  if(count==img$.length) {img$.fadeOut(1000); return;}
  //垂直位置は「count * 10」に、水平位置をランダムに「randomx[count] * 20」に指定
  $(img$[count]).css({top: count * 10 + 'px', left: rand[count] * 20 + 'px'}).fadeIn( 100,  function(){
    count ++;  //1ずつ増やす
    serial_fadeIn(img$, rand);  //再帰的（？）に呼び出す
  });    
}

以下は上記をまとめたもの。

jQuery(function($){
function create_images(count, name, h, w, target) {
for(i = 0; i < count ; i++){ $('', { src: 'images/' + name, alt: '',height: h,width: w}).css({display: 'none', position: 'absolute' }).appendTo(target);
}
$(target).css('position', 'relative');
return $(target).find('img');
}

Web Design Leaves