●2016/08/04:即時関数で囲んで、グローバル変数を消しました。
2枚の画像を並べてぺージめくりをする、コメント付きのJavaScriptです。
JavaScriptのソースの中で、開始時に右から左にめくる硬い紙用の(洋紙タイプ)か、左から右にめくる柔らかな紙用の(和紙タイプ)かを選択できます。
そして
ソースの中で、「右から左」か「左から右」か、めくる方向を選択できます。
さらに
ソースの中で、繰り返し(なし=0 往復=1 一方向=2)の方法を選択できます。
「0」なら最終ページまでめくったら終了、「1」なら最終ページにきたら今度は逆向きにめくり、「2」ならそのまま同方向で開始ページに戻ってめくります。
今回は「和紙タイプ」と「右から左」と「一方向」を選択しました。
左右の「めくる方向」というのは、絵本のようなストーリー性のあるモノを並べる時は注意が必要です。
「右から左」なら、
左に1番目、3番目、5番目……、
右に2番目、4番目、6番目……と画像名を記述し、
「左から右」なら、
右に1番目、3番目、5番目……、
左に2番目、4番目、6番目……と記述します。
表示順番が重要な場合は、記述順番に気をつけて下さい。
ページめくりの原本は
QPONのページめくりスライドショーから。
領域(ここでは#beseQ)を基準にして、ボタンやコメントを配置する方法は、
AllAbout から。
原本をHTML5に対応にし、簡略化しました。
ページめくりの位置指定、ボタンやコメントの位置指定もCSSの指定で変更できます。