WEBサイトでのスライドショーについて教えてください

質問

お世話になります。WEBサイトでクリックするたびに画像が変わるスライドショーを他のページなどを参考にfunction prev()等を使って設置しました。
具体的にはこんな感じです
<script type="text/javascript">
<!--
var n = 0;
var m = 0;
var m= new Array();
img[m++] = "010.jpg";
img[m++] = "011.jpg";(以下繰り返し)
function prev() {
if (--n < 0) { n = m - 1; }
document.images['img1'].src = img[n];
}
function next() {
if (++n == m) { n = 0; }
document.images['img1'].src = img[n];
}
// -->
</script>
<img name="img1" src="001.jpg" alt="">
<form action="#">
<input type="button" value="▼" onclick="prev()"><input type="button" value="▲" onclick="next()">
</form>
これは順調に稼動しました。

その後同じページ（上記の下側）に、最初の画像を「201.jpg」、スライドショーで表示させたい画像を「210.jpg」「211.jpg」に変更して同じものを記述しました。画面上はきちんと表示されるのですが下に設置したほうの▼▲をクリックすると「201.jpg」が「210.jpg」に変わるのではなく、上に設置した「010.jpg」「011.jpg」に画像が変わります。onclick="prev()"が同じなのがいけないのかと思うのですが、上と下を区別する方法がわかりませんでした。
初心者のような質問で恐縮ですがご存知の方よろしくお願いします。

回答No.2

yuuu69 · ベストアンサー

すみません。回答追加します。
function next() 、onclick="next()も同じように名前を変えなければいけません。
function next2() 、onclick="next2()とか、、

お礼

ありがとうございました。この手は質問前に試していたのですが、onclickの区別を忘れていました。
早速試してみたら、教えていただいたことに加え、imgを上下で区別（img1とimg2など）で完全に動作しました。
ありがとうございました。

回答No.1

yuuu69

疑問を抱かれている通り、
画像のファイル名だけを変えたものをそっくり記述したとすると、ファンクション名がダブってしまって、最初のファンクション"function prev()"が実行されてしまっていると思います。

ので、画像210.jpgのスライドショー用は"function prev2()"とかに変えて、
それに合わせて、onclick="prev2()"とすれば別々に実行できると思います。