このページの本文へ

JavaScriptでiPhone/iPad用フォトアルバムを作ろう (2/4)

2011年06月16日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

一定時間ごとに画像が切り替わるスライドショー

 単純な画像の表示を試したところで、今度は一定時間ごとに画像が切り替わるスライドショーにしてみましょう。

 といっても、Webでおなじみの一般的なスライドショーと同じ原理ですので、難しくありません。表示する画像のURLを配列に入れ、何枚目を表示するかを示すカウンター変数(count)を用意します。一定時間経過したらカウンターを増やして、対応する画像を表示するだけです。

 HTML/CSS+JavaScriptであればimg要素のsrcプロパティに画像のURLを指定しますが、NimbleKitではsetImage()メソッドの引数に画像のURLを指定します。

 実際のプログラムがサンプル2です。iOSシミュレーターで実行すると、2秒ごとに画像が切り替わっていくのが確認できます。

2秒ごとに画像が切り替わる

■サンプル2

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
</head>
<body>
<script>
var count = 0;
var imageURL = ["./images/1.jpg","./images/2.jpg","./images/3.jpg",
"./images/4.jpg","./images/5.jpg"];   
var imageview = new NKImageView();
imageview.init(0,0, 320, 480, "./images/1.jpg");
imageview.show();
setInterval("rotateImage()", 2000);
function rotateImage(){
count = count + 1;
count = count % imageURL.length;
imageview.setImage(imageURL[count]);
}
</script>
</body>
</html>

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く