スライドショー

完成品

 イメージを順番に表示する処理で迷走しました。
 時計のサンプルからsetTimeout命令を見つけ、この方法にたどり着くことができました。
 負荷が高くなりやすいので、画像の大きさ、切り替え速度に気をつける必要があるようです。

画像の先読み

<img name="slideImage" src="../img/slide/slide0.png" style="display:none">
...
 スライドショーで使う画像を事前に読み込んでおきます。
 getElementsByNameで画像リストを取得し、srcを取り出すためにname属性を加えています。リストは複数扱いなのでElementsです。

コード

Raphael(function(){
  //初期化
  var paper = Raphael("RaphaelCanvas", 320, 160);
  var totalTime = 5000;//一枚の画像を表示する時間
  //要素参照
  var imgList = document.getElementsByName("slideImage");
  //レイヤー初期化
  var layer = new Array(2);
  for(i = 0; i < 2; i++){
    layer[i] = paper.image("", -320, -160, 320, 160);
  }
  //アニメーション作成
  var anim = Raphael.animation({
    "0%":{"opacity":"0", "x":"-32", "y":"-32"},
    "10%":{"opacity":"1", "x":"0", "y":"0"},
    "90%":{"opacity":"1", "x":"0", "y":"0"},
    "100%":{"opacity":"0", "x":"-32", "y":"-32"}
  }, totalTime);
  //アニメーション実行
  var imgNum = 0;
  var lyNum = 0;
  (function(){
    //レイヤーに画像へのリンクを設定する
    layer[lyNum].attr({"src":imgList[imgNum].src});
    layer[lyNum].animate(anim);
    //画像番号のインクリメントとレイヤーの切り替え
    imgNum ++;
    if (imgNum == imgList.length){
      imgNum = 0;
    }
    lyNum ^= 0x01;
    //タイマー設定
    setTimeout(arguments.callee, totalTime * 0.9);
  })();
});

<raphael_slide.js>

備忘録

 settimeoutにはタイマー以上の使用方法があり、勉強する必要がある。
 アニメーション作成時の%表記の部分を変数で指定する方法はないか?