asamuzaK.jp : 画像をフェードさせながらランダムに入れ替えるVer.2

画像をフェードさせながらランダムに入れ替えるVer.2

"asamuzaK.jp : 画像をフェードさせながらランダムに入れ替える"の改訂版
サンプル・デモ、サンプル・デモその2。なお、サンプルで使っているトランプの画像はフリー素材の来夢来人より拝借しました。

主な変更点は…

完全に外部スクリプト化しつつ、各ページ毎のonload属性での呼び出しを不要とした
代わりに画像の情報は外部スクリプトにまとめて記述
画像フォルダ毎に、画像の種類（拡張子）を自由に設定できるようにした
Google Chromeでうまく動かない（opacityの減算で0.1ずつ（とか0.05ずつ）減らしているのに、なぜかChromeは小数点以下が何桁も続き、"0"にならない。たぶんChromeのバグ?）ことへの対処で小細工も施す

など。

適用方法とサンプルソース

画像の準備

特定のフォルダ（この例では"./random/"、"./random2/"など）に画像を用意。枚数に制限無し
画像のファイル名は「1.jpg」「2.jpg」など、連続した通し番号にしておく
画像のサイズは全部同じでなくてもいい（縦横比が揃っていればOK）
画像の種類（jpg、pngなど）はフォルダ毎に自由に設定可能（ただし同一フォルダの中の種類は統一させておく）

HTML断片例

<html>
<head>
<script type="text/javascript" src="./imgfader.js"></script>
<!-- 外部スクリプトとして読み込ませる -->
</head>
<body>
<!-- body要素のonload属性は不要 -->
<p>
<span id="image_container">
<img src="./random/1.jpg" id="random_photo" />
</span>
<!-- 画像を（ダミーの）親要素（spanやdivなど）の中に配置 -->
</p>
</body>
</html>

CSS例

#image_container {
  position : absolute; /* またはfloatでポジショニング */
  padding : 0;
  width : 16em;
  height : 12em;
}
#random_photo {
  width : 16em;
  height : 12em;
}
/* 画像サイズと親要素(id="image_container")のサイズを揃えること */

JavaScript（外部ファイルにして汎用化）

処理を若干修正

/*
  imgFader()
  画像をフェードさせながらランダムに入れ替え
  http://asamuzak.jp
*/

var isMSIE = /*@cc_on!@*/false;
var ieVersion = (function(reg) { return isMSIE && navigator.userAgent.match(reg) ? RegExp.$1 * 1 : null; })(/MSIE\s([0-9]+[\.0-9]*)/);

function addEvent(target, type, listener) {
  target.addEventListener ? target.addEventListener(type, listener, false) :
  target.attachEvent ? target.attachEvent('on' + type, function() { listener.call(target, window.event) }) :
  target['on' + type] = function(e) { listener.call(target, e || window.event) };
}

function imgFader() {
  var rImgSettings = function() {
    return [
      // ここにランダム表示する画像群の配列（画像群毎にカンマ区切りで配列を追加）
      // [画像の総枚数, 画像フォルダへのパス, 画像のid, 拡張子],
      // [画像2の総枚数, 画像2フォルダへのパス, 画像2のid, 拡張子]…
      // [24, './random/', 'random_photo', '.jpg'],
      // [10, './random2/', 'random_image', '.gif'],
      // [10, './random3/', 'random_image2', '.gif']
    ];
  };
  var fadeInOut = function(rImg) {
    var elm = document.getElementById(rImg.id);
    if(elm.style.opacity > 0) {
      elm.style.opacity = Math.floor((elm.style.opacity - 0.05) * 100) / 100;
      elm.style.opacity <= 0 && (elm.style.opacity = 0);
      setTimeout(function() { fadeInOut(rImg) }, 100);  // 2秒フェード
      // setTimeout(function() { fadeInOut(rImg) }, 50);  // 1秒フェード
    }
    else {
      elm.src = rImg.path + rImg.nxt + rImg.ext;
      elm.style.opacity = 1;
      setNextImg(rImg);
    }
  };
  var setNextImg = function(rImg) {
    for(var r = Math.floor(Math.random() * rImg.max) + 1; r == rImg.nxt;) {
      r = Math.floor(Math.random() * rImg.max) + 1;
    }
    if(r != rImg.nxt) {
      var rSrc = rImg.path + r + rImg.ext;
      rImg.nxt = r;
      if(isMSIE && ieVersion < 9) {
        var img = new Image(); img.src = rSrc;
        setTimeout(function() {
          var img = new Image(); img.src = rImg.path + rImg.nxt + rImg.ext;
          var elm = document.getElementById(rImg.id);
          elm.style.filter = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
          elm.filters[0].apply(); elm.src = img.src; elm.filters[0].play();
          setNextImg(rImg);
        }, 5000);  // ループ間隔（ミリ秒）
      }
      else {
        var elm = document.getElementById(rImg.id);
        elm.parentNode.setAttribute('style', 'background : url(' + rSrc + '); background-size : 100% 100%;');
        elm.style.opacity = 1;
        setTimeout(function() { fadeInOut(rImg) }, 5000);  // ループ間隔（ミリ秒）
      }
    }
  };
  var absPath = function(oPath) {
    var elm = document.createElement('span');
    elm.innerHTML = '<a href="' + oPath + '" />';
    return elm.firstChild.href;
  };
  if(document.getElementById) {
    for(var arr = rImgSettings(), i = 0, l = arr.length; i < l; i++) {
      var elm = document.getElementById(arr[i][2]);
      var pReg = new RegExp(absPath(arr[i][1]) + '([0-9]+)' + arr[i][3]);
      elm && elm.src.match(pReg) && setNextImg({ nxt : RegExp.$1, max : arr[i][0], path : arr[i][1], id : arr[i][2], ext : arr[i][3] });
    }
  }
}
addEvent(window, 'load', imgFader);

asamuzaK.jp

画像をフェードさせながらランダムに入れ替えるVer.2

適用方法とサンプルソース

"画像をフェードさせながらランダムに入れ替えるVer.2"へのTwitter上でのコメントやRT

"画像をフェードさせながらランダムに入れ替えるVer.2"へのコメント

"画像をフェードさせながらランダムに入れ替えるVer.2"へのトラックバック