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

2007/09/20 12:48

このQ&Aのポイント

「戻る」「進む」ボタンで5枚の画像を変えられる方法を教えてください。
現在のコードでは、画像の順番が飛んでしまい、うまく機能しません。
質問者は、画像が切り替わる「戻る」「進む」ボタンの実装方法を知りたいとしています。

pilot2
お礼率31% (18/58)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#140971

2007/09/20 14:33 回答No.1

簡単なのは、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.dtd"> <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>