掲示板/JavaScript質問板/過去ログ/一覧/ 進む・戻るボタンで画像を切り替える

0 名前：輝一： 2007/09/13（木） 13:04 ID:B8KJ7f6l sub-9g

【何をしたいのか】
　「進む」「戻る」ボタンをクリックすると、ページ内で画像が切り替わるようにしたい。
　同じページに複数配置しても動くようにしたい。
　切り替わる各画像の枚数はバラバラ。

【現在の状況】
　切り替わる画像自体をクリックする切り替えには成功しました。
　同じページにそれぞれ配置した切り替えたい画像の枚数がバラバラで、それに対応出来ない。（下記の参考スクリプトだとすべて５枚づつで限定されている）
　画像自体のクリックで切り替わるのではなく、「進む」「戻る」ボタンでそれぞれを切り替えたい。
　

【何をしてみたのか】

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分
exp = "jpg" // 拡張子

num = 5; // 入れ替える画像の枚数(最初の画像も含める)
seq = 4; // IMGタグの個数

//IMGタグの個数、入れ替える個数にあわせて以下の画像ファイルを作ってください。
//
// img0_0.jpg ～ img0_4.jpg
// img1_0.jpg ～ img1_4.jpg
// ～以下略～

cnt = new Array(seq);
for (i = 0; i < cnt.length; i++) {
cnt[i] = 0;
}

function changeImage(idx) {
cnt[idx]++;
cnt[idx] %= num;
//IMGタグのsrcを作成
src = nme + idx + "_" + cnt[idx] + "." + exp;

//IMGタグを取得
img = null;
id = "img" + idx;
if (document.all) { img = document.all[id]; }
if (document.layers) { img = document.layers[id]; }
if (!document.all && document.getElementById) { document.getElementById(id); }

if (img) {
img.src = src;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
画像をクリックすると、画像が入れ替わります。<BR><BR>
<A href="JavaScript:changeImage(0)"><IMG src="img/img0_0.jpg" id="img0" border="0"></A><BR><BR>
<A href="JavaScript:changeImage(1)"><IMG src="img/img1_0.jpg" id="img1" border="0"></A><BR><BR>
<A href="JavaScript:changeImage(2)"><IMG src="img/img2_0.jpg" id="img2" border="0"></A><BR><BR>
<A href="JavaScript:changeImage(3)"><IMG src="img/img3_0.jpg" id="img3" border="0"></A><BR><BR>
</BODY>
</HTML>

以上よろしくお願いいたします。

1 名前：匿名： 2007/09/13（木） 13:04 ID:/UQCBCoW sub-y9: 変更部分のみ抜粋

num = [5, 3, 2, 3]; // 入れ替える画像の枚数(最初の画像も含める)

function changeImage(idx, dir) {
cnt[idx] += num[idx] + dir;
cnt[idx] %= num[idx];

<button onclick="changeImage(0,-1)">戻る</button>
<button onclick="changeImage(0,1)">進む</button>

2 名前：輝一： 2007/09/13（木） 13:04 ID:B8KJ7f6l sub-9g: >>1
匿名さん

ありがとうございます！！
本当に助かりました。。