iBooksで複数の画像を使用してアニメーションをさせる

iBooksで本を作る時に、複数の画像を使用してgifアニメーション的なことをさせたかったので作ってみました。
クリックするとアニメーションが開始するような仕組み。

今回はJavascriptを使用しています。
CSS3でもできそうでしたが、JSの方がファイルの管理は楽で流用も簡単だと思ったので、こちらを使用。

style/test.css

@charset "utf-8";

html,body {
 padding:0;
 margin:0;
}

.img {
 visibility:hidden;
 position: absolute;
 top:0;
 left:0;
}

#clickarea {
    position:relative;
}

text/test.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="ja" xml:lang="ja">
<head>
<title>テストページ</title>
<link href="../style/test.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=768, height=1024"/>
</head><body>
<div id="clickarea">
 <div>
  <img src="../images/test001.jpg" />
 </div>
 <div class="img anime1">
  <img src="../images/test001.jpg" />
 </div>
 <div class="img anime1">
  <img src="../images/test001_01.jpg" />
 </div>
 <div class="img anime1">
  <img src="../images/test001_02.jpg" />
 </div>
</div>
<script src="../js/test.js" type="text/javascript"></script>
</body></html>

js/test.js

var count = 0;
var anime_flg = 0; //クリック連打防止用
var speed = 500; //アニメーションの速さ(ミリ秒単位)

function onClick() {
 
 if(anime_flg != 0){
  return;
 }
 
 count = 0;
 anime_flg = 1;

 setTimeout('onTimer()',speed);
}

function onTimer() {
 
 var imgs = document.getElementsByClassName("img");
 var imgs2 = document.getElementsByClassName("anime1");
 
 count++;
 
 if(count < imgs2.length - 1){
  setTimeout('onTimer()',speed);
 }else{
  anime_flg = 0;
 }
 
 for (var i=0; i < imgs.length; i++) {
  imgs[i].style.visibility = "hidden";
 }
 
 for (var i=0; i < imgs2.length; i++) {
  if(count == i){
   imgs2[i].style.visibility = "visible";
  }
 }
}

var clickarea = document.getElementById('clickarea');
clickarea.addEventListener('click', onClick);

javascript を使用する時は、opf ファイルに、「properties="scripted"」の記述が必要になる。ココが重要なポイント!

<item id="text.test.xhtml" href="text/test.xhtml" media-type="application/xhtml+xml" properties="scripted" />