画像切り替え

質問

javascript初心者です。

あるサイト→http://himajin.moo.jp/freejava/imgchange/imgview.htmlをカスタマイズしようと思っているんですが、スライドショーという形の、ループとか時間がきたら画像が変わるってのじゃなくて、サムネイル表示を活かしたまま、右ボタンでnext、左ボタンでbackみたいなサクサク動くようにしたいんですが、どういじっていいのか分かりません。

わかる方教えて下さい！よろしくお願いします。

回答No.1

qualheart

Nextボタン
<img onClick="NextImg()" src="next.gif">

Backボタン
<img onClick="BackImg()" src="back.gif">

画像
<img id="chgimg" src="1.gif">

<script language="JavaScript">
<!--
n = 1;
imgall = 4; //画像の数

function NextImg() {
if (n < imgall) {
n = n + 1;
chgimg.src = Number(n) + ".gif";
}
}

function BackImg() {
if (n > 1) {
n = n - 1;
chgimg.src = Number(n) + ".gif";
}
}

//-->
</script>

画像の数には、実際にある画像の数を入力し、入れ替える画像はそれぞれ「1.gif」「2.gif」と連番の名前にすることを条件としています。
とても簡単ですが、こんな感じで。
本当は今表示されている画像が何かを読み込んで、画像を変更していくのが一番良いと思いますが。ちょっとスクリプトを書くのが面倒だったので。
NextやBackボタンは、移動する画像がなければグレーアウト画像に変更するとかの処置も本当は必要でしょうね。

参考までに試してみてください。
※検証してないのでうまく動かなかったらゴメンナサイ。

お礼

素早い返答どうもありがとうございます。

qualheartさんの書いてくれたスクリプトで試したところnextもbackのうまくいったんですが、サムネイルを押すとボタンは消えてしまいました。でもなにか見えてきそうなので、とりあえずもう少しやってみます。

本当にありがとうございます。