JavaScript/ImageSwitcher をテンプレートにして作成

開始行:
* ImageSwicher 画像の切り替えサンプル｜Native JavaScript Version ~ -DEMO：https://koichi-inoue.github.io/JS_ImageSwitcher/ -CODE：https://github.com/koichi-inoue/JS_ImageSwitcher ~ ***サンプルのディレクトリ構成 -index.html -style.css -script.js 　 &small(ネイティブ JavaScript です。ライブラ... -images --PIC_01.jpg --PIC_02.jpg --： --PIC_05.jpg ~ ***HTML 付記 -画像素材の増減に応じて #selector 部分のリスト項目を増減... ~ ***JavaScript 付記 -はじめに、配列変数 fileName に画像素材のファイル名（フル... -複数の関数で共有する外部変数を定義しています。 --変数 current は、現在 #picture 部分に表示されている画像... --変数 picture には、#picture 要素（＜img＞）を取得します。 --変数 caption には、#caption 要素（＜p＞）を取得します。 - window.onload 以下、ボタンにイベントリスナーを登録して... --クラス .select-button（この例では全５要素）のそれぞれ（... --ID #prevButton にイベントリスナー changePrev() を登録。 --ID #nextButton にイベントリスナー changeNext() を登録。 -function selectImagev(event) の定義 --current に this.number を代入する --#picture（img要素）の src に fileName[current] を割り当... --#caption の html として fileName[current] を記載します -function changePrev(event) の定義 --current の数字を一つ減らします。 そのタイミングで、数字が 0 未満になった場合は、最大の番号... --#picture（img要素）の src に fileName[current] を割り当... --#caption の html として fileName[current] を記載します。 -function changeNext(event) の定義 --current の数字を一つ増やします。 そのタイミングで、数字が 最大値（この場合は５）になったら... --#picture（img要素）の src に fileName[current] を割り当... --#caption の html として fileName[current] を記載します。 ~ ~ **APPENDIX まったく同じ内容のものを jQuery を用いて記述したバージョ... ＞ [[jQuery/ImageSwitcher]] ~ ~

終了行:
* ImageSwicher 画像の切り替えサンプル｜Native JavaScript Version ~ -DEMO：https://koichi-inoue.github.io/JS_ImageSwitcher/ -CODE：https://github.com/koichi-inoue/JS_ImageSwitcher ~ ***サンプルのディレクトリ構成 -index.html -style.css -script.js 　 &small(ネイティブ JavaScript です。ライブラ... -images --PIC_01.jpg --PIC_02.jpg --： --PIC_05.jpg ~ ***HTML 付記 -画像素材の増減に応じて #selector 部分のリスト項目を増減... ~ ***JavaScript 付記 -はじめに、配列変数 fileName に画像素材のファイル名（フル... -複数の関数で共有する外部変数を定義しています。 --変数 current は、現在 #picture 部分に表示されている画像... --変数 picture には、#picture 要素（＜img＞）を取得します。 --変数 caption には、#caption 要素（＜p＞）を取得します。 - window.onload 以下、ボタンにイベントリスナーを登録して... --クラス .select-button（この例では全５要素）のそれぞれ（... --ID #prevButton にイベントリスナー changePrev() を登録。 --ID #nextButton にイベントリスナー changeNext() を登録。 -function selectImagev(event) の定義 --current に this.number を代入する --#picture（img要素）の src に fileName[current] を割り当... --#caption の html として fileName[current] を記載します -function changePrev(event) の定義 --current の数字を一つ減らします。 そのタイミングで、数字が 0 未満になった場合は、最大の番号... --#picture（img要素）の src に fileName[current] を割り当... --#caption の html として fileName[current] を記載します。 -function changeNext(event) の定義 --current の数字を一つ増やします。 そのタイミングで、数字が 最大値（この場合は５）になったら... --#picture（img要素）の src に fileName[current] を割り当... --#caption の html として fileName[current] を記載します。 ~ ~ **APPENDIX まったく同じ内容のものを jQuery を用いて記述したバージョ... ＞ [[jQuery/ImageSwitcher]] ~ ~

ページ名: