- ベストアンサー
「戻る」「進む」ボタンで画像を変えるには？
- 「戻る」「進む」ボタンで5枚の画像を変えられる方法を教えてください。
- 現在のコードでは、画像の順番が飛んでしまい、うまく機能しません。
- 質問者は、画像が切り替わる「戻る」「進む」ボタンの実装方法を知りたいとしています。
- pilot2
- お礼率31% (18/58)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （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>
