一定時間ごとに画像を入れ替える

一定時間ごとに画像を入れ替えるには、あらかじめ表示したい画像のURL/ファイル名をあらかじめ配列に入れておきます。次に表示する画像の順番を示すカウンタ変数を用意します。ガジェットが読み込まれたら<img>タグのsrc属性に配列から読み出した画像のURLを指定します。その後、カウンタ変数を1つ増やします。カウンタ変数と配列の総数の剰余(割り算のあまり)を求め、それをカウンタ変数に入れます。これで、配列内で指定された画像の数だけ順番に表示が行われます。
入れ替えが終わったらsetTimeout()を使って一定時間ごとに処理を行うようにします。

ガジェットXMLデータをダウンロード

<?xml version="1.0" encoding="utf-8"?>
<Module>
<ModulePrefs title="Sample" author_email="[email protected]">
</ModulePrefs>
<Content type="html"><![CDATA[
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(changeImage);
var count = 1;
var imageURL = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg"];
var baseURL = "http://www.openspc2.org/reibun/OpenSocial/gadget/photo/";
// 画像を切り替える関数
function changeImage(){
var filename = baseURL+imageURL[count];
document.getElementById("myPhoto").src = filename;
count++;
count = count % imageURL.length;
setTimeout("changeImage()", 2000);
}
</script>
<img src="photo/0.jpg" id="myPhoto"></div>
]]></Content>
</Module>