|
|
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>クリックで画像を切り替える</title>
<script language="JavaScript">
<!--
ImgName = new Array;
ImgName[0] = new Image();
ImgName[0].src = "1.jpg";
ImgName[1] = new Image();
ImgName[1].src = "2.jpg";
ImgName[2] = new Image();
ImgName[2].src = "3.jpg";
ImgName[3] = new Image();
ImgName[3].src = "4.jpg";
var i = 0;
function next_img () {
i++;
if (i > (ImgName.length-1)) {
i = 0;
}
document.ImgArea.src = ImgName[i].src;
}
function prev_img () {
i--;
if (i < 0) {
i = (ImgName.length-1);
}
document.ImgArea.src = ImgName[i].src;
}
//-->
</script>
<style type="text/css">
<!--
body { text-align: center;}
-->
</style>
</head>
<body bgcolor="#FF3366">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><button type="button" onClick="prev_img()">←prev image</button></td>
<td align="right"><button type="button" onClick="next_img()">next image→</button></td>
</tr>
<tr>
<td colspan="2"><img name="ImgArea" src="1.jpg"></td>
</tr>
</table>
</body>
</html>
