ひとつずつずれていく画像
原案：平井 公大 氏 （2001/05/12 登録）
ボタンを押すとテーブルに表示している画像が 1秒毎にひとつずつずれていき、一巡したら最初の画像が大きく表示されます（IE5、NN6以降、ただしIEではキャッシュの設定が「ページを表示するたびに確認する」設定になっていると、画像の入れ替えがおいつかなくなります）。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>ひとつずつずれていく画像</title>
<script language="JavaScript">
<!--
var START;
var CHECK;
// 画像の並び
var jun = new Array(0,1,2,3,4,8,7,6,5,9,10,11,12,16,15,14,13);
// ソース画像格納用配列
var img = new Array(17);
img[0] = new Image(); img[0].src = "";
img[1] = new Image(); img[1].src = "1.jpg";
img[2] = new Image(); img[2].src = "2.jpg";
img[3] = new Image(); img[3].src = "3.jpg";
img[4] = new Image(); img[4].src = "4.jpg";
img[5] = new Image(); img[5].src = "5.jpg";
img[6] = new Image(); img[6].src = "6.jpg";
img[7] = new Image(); img[7].src = "7.jpg";
img[8] = new Image(); img[8].src = "8.jpg";
img[9] = new Image(); img[9].src = "9.jpg";
img[10] = new Image(); img[10].src = "10.jpg";
img[11] = new Image(); img[11].src = "11.jpg";
img[12] = new Image(); img[12].src = "12.jpg";
img[13] = new Image(); img[13].src = "13.jpg";
img[14] = new Image(); img[14].src = "14.jpg";
img[15] = new Image(); img[15].src = "15.jpg";
img[16] = new Image(); img[16].src = "16.jpg";
// テーブル出力関数
function write_table() {
var n = 0;
document.write("<TR>");
for (var i=1; i<img.length; i++) {
n = jun[i];
document.write("<TD><IMG SRC='"+img[n].src+"' NAME='img"+n+"'></TD>");
if( i % 4 == 0 ) document.write("</TR>\n<TR>");
}
document.write("</TR>");
// ゴール対象のソース画像を保管しておく
START = document.images['img1'].src;
}
function move_img() {
CHECK=false;
// 最後の画像を一時退避
img[0] = document.images['img'+(jun.length-1)].src;
// 画像をひとつずつ順番にずらす
for (var i=img.length-1; i>0; i--) {
if (i==1) document.images['img'+i].src = img[0];
else document.images['img'+i].src = document.images['img'+(i-1)].src;
}
// ゴール判定
if (img[0]==START) {
document.getElementById('GOAL').style.visibility="visible";
} else timeID = setTimeout( 'move_img()', 1000 );
}
CHECK=true;
// -->
</script>
</head>
<body>
<div style="text-align:center;height:130px">
<div style="position:absolute; top:380px; left:100px;
width:80px; height:120px;">
<table border="0" cellpadding="0" cellspacing="0">
<script language="JavaScript">
<!--
write_table();
// -->
</script>
</table>
</div>
<div id="GOAL" style="position:absolute; top:380px; left:200px;
width:80px; height:120px; visibility:hidden;">
<img src="1.jpg" width="80" height="120" alt="GOAL!">
</div>
<div style="position:absolute; top:510px; left:115px;">
<form>
<input name="button" type="button"
onClick="if (CHECK) move_img()" value="Click">
</form>
</div>
</div>
</body>
</html>
