◀︎STUDY JavaScript_008-1 function ねくすと() / function ばっく()
1
-----
-----
-----
-----
動作: 画像の切り替え
- 画像の上 / またはボタンをクリックして次の画像に切り替えたい.
- 画像でボタンを作成し, クリックで次の画像に切り替えたい.
- 進む / 戻るの2種類のボタンを設置したい.
- 画像の数と同じ数量のボタンを設置して, ダイレクトに画像を選択できるようにしたい.
- 画像を順に自動 (スライド・ショーとして) で表示したい.
▼ Download: ■ sample_JS_008-ABCD
用途 / 目的
- 写真の保存 / 整理
- 画像のデータ・ベース制作
- カタログなどで商品のスライド・ショーとして
サンプル - 1
THML の img タグで Test_img_1.jpg を表示している.
サンプル - 2
JavaScript の write() メソッド → document.write() で Test_img_1.jpg を表示している.
サンプル - 3
img タグで Test_img_1.jpg を表示し, input タグでボタンを作り, クリックすると Event Handler で Test_img_2.jpg に画像が入れ替わる.
サンプル - 4
img タグで Test_img_1.jpg を表示し, 24種類の input タグでボタンを24個作り, それぞれをクリックするとその番号の jpg に画像が入れ替わる.
Test_img_1 〜 Test_img_24 まで
- Test_img_1.jpg

- Test_img_2.jpg

- Test_img_3.jpg

- Test_img_4.jpg

new Array() は配列を作る
- 配列は連番が付けられた物(インデックス)の集合体
- 配列の名前: 「画像」/「前後」が配列名
- 0 から数え始める: →プログラミング言語の共通の事柄
- JavaScript での配列宣言は new Array()
1
-----
-----
-----
-----
◀︎Contents STUDY JavaScript_008-1