画像を交互に入れ替える (プログラム内のカウンタを利用して入れ替える)
説明
画像を交互に入れ替えるには、いくつかの方法があります。ここではプログラム内部にカウンタと入れ替える画像のURLを用意して入れ替えます。カウンタはグローバル変数として持つ方法もありますが、サンプルのように画像オブジェクトにプロパティとして追加し、そのプロパティを利用することもできます。この方法では変数に依存せず、指定した画像オブジェクトだけに割り当てられるので変数名の衝突などの不具合は発生しません。また、定期的に画像を入れ替える処理を行わせるためにsetInterval()を使います。
サンプルプログラム
window.onload = function(){
setInterval("swapPhoto()", 1000);
var imgObj = document.getElementById("photo01");
imgObj.counter = 0;
}
// 画像を交互に入れ替えるための関数
function swapPhoto(){
var imgObj = document.getElementById("photo01");
var imgURL = ["images/DSC0001.jpg", "images/DSC0002.jpg"];
imgObj.counter = (imgObj.counter + 1) % 2;
imgObj.src = imgURL[imgObj.counter];
}