面白23■2枚ページめくり左右コメ付き    最終修正日 : 2016/08/07

■2016/08/04:原本から私が勝手な判断で削除していた「和紙タイプ」を復活しました■
「洋紙タイプ」と「和紙タイプ」の違いは、めくる方向とは無関係で、紙の質感の表現の違いでした。
「洋紙タイプ」は硬い紙のイメージで動作が直線的で、「和紙タイプ」は柔らかな紙のイメージで動作がなめらかです。
教えて下さったQPONの宮本様、ありがとうございました。ご迷惑をおかけしてすみませんでした。

■2016/08/07:イメージの先読みの記述ミスを修正■
●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の指定で変更できます。