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