JavaScript でスライドを作ってみる001
2017年7月某日
ラボラジアン
方針
- ページを制御する部分は、window.historyオブジェクトを使って自分でコードを書きます。
- 1つのHTML内に、全てのページの内容を書いておきます。
- 1ページ分の記述は、
<section>タグで囲みます。
- 書いたページの情報は JavaScriptの配列で管理します。
- URL末尾のハッシュでページを指定します。（
#1なら1ページ目、#2なら2ページ目となります）
ページ履歴の管理
- ハッシュでページ位置を特定したら、目的のページ以外の
<section>タグは非表示にします。
- しかしこれだけでは、ブラウザの「戻る」「進む」ボタンに対応できないため、
window.historyオブジェクトも使います。
- ページを移動する処理のところで、
replaceState()メソッドや pushState()メソッドを使いページ履歴に情報を追加します。
- 但し、「戻る」「進む」が押された時にはこれらのメソッドを呼ばないようにします。
その他
- 画面下の三角アイコンでページを戻る、または進むことができます。
- 左矢印キーと右矢印キーでページを戻る、または進むことができます。
- 画面下に総ページ数と現在のページ数が表示されます。
- ハッシュでページを指定したURLを直接指定してアクセスした場合も、ちゃんとそのページが表示されます。
ソースコード