「戻る」「進む」ボタンで画像を変えるには？

解決済

質問者：pilot2
質問日時：2007/09/20 12:48
回答数：1件

「戻る」「進む」ボタンで5枚の画像を変えられるようにしたいのですが、なかなかできません。
順番が飛んでしまったりしてしまいます。

var n=0;
var imgDB=new Array("kenkyu/0.jpg","kenkyu/1.jpg","kenkyu/2.jpg","kenkyu/3.jpg","kenkyu/4.jpg");
function change(){
if(n==0)n=4;
if(n==5)n=0;
document.img.src=imgDB[n];
}

<TABLE cellpadding="10" bgcolor="#0099cc">
<TBODY>
<TR>
<TD><IMG src="kenkyu/0.jpg" name="img" width="500" height="400" border="0"></TD>
</TR>
</TBODY>
</TABLE>

<A href=JavaScript:n--;change();><IMG src="kenkyu/modoru.jpg" width="96" height="28" border="0"></A>　
<A href=JavaScript:n++;change();><IMG src="kenkyu/susumu.jpg" width="96" height="28" border="0"></A><BR>

分かる方、教えて下さい。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： noname#140971
回答日時：2007/09/20 14:33

簡単なのは、next_src()、previous_src() と[次]と[戻る]とに対応する関数を作成するやり方。

チクッと関数らしくするには、表示するターゲットと画像を格納している変数とを引数に。
後は、カウントダウン、カウントアップするだけ。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
　　<title>TEST</title>
　　<link rel="stylesheet" type="text/css" href="../css/mystyle.css"/>
　　<script>
　　　　var i;
　　　　var n = 0;
　　　　var a_images = new Array(5);

　　　　for (i=0; i<5; i++) {
　　　　　　a_images[i] = new Image(323,267);
　　　　}
　　　　a_images[0].src　="new/holiday_01.gif";
　　　　a_images[1].src = "new/holiday_02.gif";
　　　　a_images[2].src = "new/holiday_03.gif";
　　　　a_images[3].src = "new/holiday_04.gif";
　　　　a_images[4].src = "new/holiday_05.gif";
　　　　
　　　　function next_src(objects, img) {
　　　　　　n = n + (n < 4);
　　　　　　objects.src = img[n].src;
　　　　}
　　　　function previous_src(objects, img) {
　　　　　　n = n - (n > 0);
　　　　　　objects.src = img[n].src;
　　　　}
　　</script>
</head>
<body>
<div id="page">
　　<form id="main" name="main">
　　<br/>　
　　<img src="modoru.gif" width="36" height="20" onclick = "previous_src(document.main.photo,a_images);"></br>
　　<img src="tsugi.gif" width="36" height="24" onclick = "next_src(document.main.photo,a_images);"></br>
　　<img id="photo" name="photo" src="new/holiday_01.gif" width="323" height="267" vspace="10"></td>
　　</form>
</div>
</body>
</html>