JavascriptでFlashのようなスライドショウ

script.aculo.usの実験をかねて、Javascriptを使った画像のスライドショウをやってみました。画像が何枚かフェードイン/アウトして最終的にメニューというかメインのコンテンツが出るというものです。

■デモページ
http://blog.flup.jp/slideshow/

使いやすいように、ライブラリ化してみました。詳細は以下のとおり。

準備

以下のJavascriptコードを使用します。これは、スライドショウを行う箇所にdivをimgタグを追加して時間が来たら切り替える処理を入れています。

/**
 * @brief  slide show javascript
 * @author Daijiro Abe
 * @date   2007.07.22
 */

var slide_id = 'slideshow';  // スライドショウを行う箇所のid
var img_base = 'img/';  // 画像ファイルを格納するパス
var img_width = 350;  // 画像ファイルの幅
var img_height = 233; // 画像ファイルの高さ
var img_ext = ".jpg";  // 画像ファイルの拡張子
var interval = 5; // 画像切り替えのタイミング
var fadeColor = "#ffffff";  // クロスフェード時の背景色

function autoexec()
{
  var e = $(slide_id);
  var classes_str = e.className;
  classes_str = classes_str.replace(/^\s+|\s+$/g, "");
  var classes = classes_str.split(" ");
  
  var delay_sec = interval+(interval+2)*(classes.length-1);
  var white = document.createElement("div");
  white.id = "slideshow_white";
  white.style.backgroundColor = fadeColor;
  white.style.width = img_width;
  white.style.margin = 0;
  white.style.padding = 0;
  white.style.zIndex = 10;
  white.style.position = "relative";
  white.style.top = "-" + img_height + "px";
  white.style.height = img_height + "px";
  white.style.lineHeight = img_height + "px";
  e.appendChild(white);

  new Effect.Fade(white.id, {
      from: 1.0,
      to: 0.0,
      delay: delay_sec,
      fps: 60,
      duration: 2,
      afterFinishInternal: function(effect) {
      }
  });

  for(var i = 0; i < classes.length; i++)
  {
    var div = document.createElement("div");
    var img = document.createElement("img");
    img.src = img_base + classes[i] + img_ext;
    div.appendChild(img);
    div.id = "slideshow_" + classes[i];
    div.style.margin = 0;
    div.style.padding = 0;
    div.style.zIndex = (i+1)*100;
    div.style.position = "relative";
    div.style.top = "-" + (i+2)*img_height + "px";
    div.style.height = img_height + "px";
    div.style.lineHeight = img_height + "px";
    e.appendChild(div);
    
    var delay_sec = interval+(interval+2)*i;
    
    new Effect.Fade(div.id, {
        from: 1.0,
        to: 0.0,
        delay: delay_sec,
        fps: 60,
        duration: 2,
        afterFinishInternal: function(effect) {
          if(effect.element.id == "slideshow_" + classes[classes.length-1])
          {
            for(var j = 0; j < classes.length; j++)
            {
              $('slideshow_' + classes[j]).style.display = "none";
              $('slideshow_white').style.display = "none";
            }
          }
        }
    });
    
    if(i > 0)
    {
      div.style.display = "none";
      var delay_sec2 = interval+(interval+2)*(i-1);
      new Effect.Appear(div.id, {
        from: 0.0,
        to: 1.0,
        delay: delay_sec2,
        fps: 60,
        duration: 2
      });
    }
  }

}

Event.observe(window,"load",autoexec);

slideshow.js

また、CSSも併せて用意しておきます。基本的にはwidthとheightの指定だけでいいかと思います。
使うための準備は以上で完了です。

組み込み方法

組み込みの方法は簡単で、まずscriptを取り込むためのタグをheadに入れます。

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/slideshow.js" type="text/javascript"></script>

次に、スライドショウを入れる場所のdivを作ります。このとき、classにファイル名の拡張子を除いた名前をスペース区切りで指定します。

<div id="slideshow" class="sample01 sample02 sample03 sample04 sample05">
  <p>ここに最終的に表示したいコンテンツを入れます</p>
</div>

課題など

今のところ、フェード時間の設定はできるようにしていません（2の部分を変数にして出せばできますが・・）。あと、Event.observeでwindow.onloadに関数を関連付けているので他にonloadで実行するものがあると競合するかもしれません。addEventListenerとかで代用した方がいいのかな？

また、現在のところFirefoxとIE7でしか確認できていないので、他のブラウザでうまく動かないなどありましたら誰かお教えください...。m(_ _)m

■追記
スライドショウ終了後にコンテンツが触れない（リンクなどが機能しない）状態になっていたので、Effect.FadeのafterFinishInternalを修正しておきました～。

Tweet

Pocket