面白２２■１枚ページめくり縦横コメ付き

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>面白２２■１枚ページめくり縦横コメ付き</title>

<!--★コピーここから-->
<style type="text/css"><!--
body{background:#ace;}/*★背景色水色。お好みで*/

/*★必須。ページめくり領域の指定。この指定の中ではpaddingは使用しないこと*/
#wakuQ{
position:relative;/*★位置指定。必ずposition:●●;を使用して指定すること*/
margin:50px auto 0px;/*★中央配置(上、左右、下）。お好みで*/
width:600px;/*★必須。スライド画像横幅*/
height:300px;/*★必須。スライド画像縦幅*/
border:solid 2px #fff;/*★枠線の色白色。お好みで*/
border-bottom-width:40px;/*★下側の枠線だけ太くする。お好みで*/
}

/*★以下はコメントの指定。#wakuQを基準としたposition:absolute;で指定*/
#MeQ { position:absolute; bottom:-40px;width:600px; font-size:24px; text-align:center;color:#00f;}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<div id="wakuQ"><!--★ページめくり領域分開始。id="wakuQ"は必須-->
<div id="zonQ"></div><!--★ページめくり分。id="zonQ"は必須-->
<div id="MeQ"></div><!--★コメント分。id="MeQ"は必須-->
</div><!--★ページめくり領域分終了-->

<div style="margin-top:20px;text-align:center;"><input type="button" value="画像クリックへ変更" id="btQ"></div><!--★ボタン指定。id="btQ"は必須-->

<script type="text/javascript"><!--
/*================================================================
１枚ぺーじめくり縦横コメ付き　By  http://www2a.biglobe.ne.jp/~qpon/js/?http://qpon.quu.cc/java/book/book3_b.htm
(サイト名ＱＰＯＮ http://www2a.biglobe.ne.jp/~qpon/) 　　★HTML5対応。簡略化　　2016/08/04
==================================================================*/
(function (){ var n=0;　 //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//初期設定
var wh=1;//めくり方式：横めくり＝0　縦めくり＝1
var muki=1;//初期めくり方向（「←・↑」＝１／「→・↓」＝－１）
var tim=2000;//自動送り間隔（ミリ秒）。1000=1秒

var url="";//★画像ファイルが別の場所にある場合はフルパスを書く。全画像共通分
var dt=new Array();//★画像ファイル名とコメントを［　，］で区切って書く。増減可能。コメント部分にはタグも使用可
n=0;dt[n]='kusa11.jpg,ベニシジミ';
n++;dt[n]='kusa12.jpg,ヒガンバナ<span style="color:red;">（彼岸花）</span>';
n++;dt[n]='af5.jpg,シマリス';
n++;dt[n]='kusa13.jpg,イチモンジセセリ';
n++;dt[n]='kusa14.jpg,クロッカス';

//指定ここまで-------------------------------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var page=1;//手動めくる＝0　自動めくり＝1。初期設定は1でないとボタンがおかしくなる
for(var i=0;i<=n;i++){dt[i]+=",,";}
var img_h=wakuQ.clientHeight, img_w=wakuQ.clientWidth;//wakuQ範囲指定に修正
var stp=(wh===0)?Math.floor(img_w/10):Math.floor(img_h/10);//移動ピッチ
(wh===0)?img_w=stp*10:img_h=stp*10;
var w=0, nn=0, mm=0, mv_flg=0, flg=0, at_tm=null, tm=null;
var fil=[], doc=[], stop=[];
//ファイルの先読み
for(i=0;i<=n;i++){ var dd=dt[i].split(","); fil[i]=new Image(); fil[i].src=url+dd[0]; doc[i]=dd[1]; stop[i]=dd[2];}
function chg(p){ muki=p; set();}//方向
function set(){ if(flg===1){ 
return;} else{ set_sub();} }//イメージセット
function set_sub(){ if(stop[mm]==="back"){ muki*=-1;chg(muki);}
if(muki===1){ll="ll_";rr="rr_";}else{ll="rr_";rr="ll_";}
w=0; mm=nn+muki;
if(mm>n){mm=0;} if(mm<0){mm=n;}
if(stop[mm]==="stop"){flg=0;}
var l1=$(ll+"1"), l2=$(ll+"2"), r1=$(rr+"1"), r2=$(rr+"2");
(wh===0)?l1.style.width=0:l1.style.height=0;
r1.src=fil[nn].src;
(wh===0)?r1.style.width=img_w+"px":r1.style.height=img_h+"px";
r2.src=fil[mm].src; l1.src=fil[mm].src; l2.src=fil[nn].src;
mv();
nn=nn+muki;if(nn>n){nn=0;}
if(nn<0){nn=n;}
}
function at_start(){ setTimeout(at,tim);}//自動
function at(){
if(flg===1){flg=0;clearTimeout(at_tm);$("btQ").value="自動切替へ変更";return;}
at_tm=setTimeout(at_sub,tim/2);
flg=1;$("btQ").value="画像クリックへ変更";
}
function at_sub(){ if(mv_flg===0){ set_sub();}}
//めくる
function mv(){
if(w>20){clearTimeout(tm);mv_flg=0;if(flg===1){at_tm=setTimeout(at_sub,tim);}return;}
var r1=$(rr+"1").style, l1=$(ll+"1").style;
if(w<10){(wh===0)?r1.width=img_w-w*stp+"px":r1.height=img_h-w*stp+"px";}
if(w===10){(wh===0)?r1.width=0:r1.height=0; $("MeQ").innerHTML=doc[mm];}
if(w>10){(wh===0)?l1.width=(w-10)*stp+"px":l1.height=(w-10)*stp+"px";}
w=w+1; mv_flg=1; tm=setTimeout(mv,50);
}
//初期配置ここから------------------------------------------------
var cp1=(wh===0)?'rect(0,'+Math.floor(img_w/2)+'px,auto,0)':'rect('+Math.floor(img_h/2)+'px,auto,auto,0)';
var cp2=(wh===0)?'rect(0,auto,auto,'+Math.floor(img_w/2)+'px)':'rect(0,auto,'+Math.floor(img_h/2)+'px,0)';
var cssA='position:absolute;top:0;left:0;width:'+img_w+'px;height:'+img_h+'px;';
var cssB=cssA+'bottom:0; right:0; margin:auto; border:none;';
var sss='<div id="ll_02" style="'+cssA+' clip:'+cp1+';"><img src="'+fil[0].src+'" id="ll_2" style="'+cssB+'"></div>';
sss +='<div id="rr_02" style="'+cssA+' clip:'+cp2+';"><img src="'+fil[0].src+'" id="rr_2" style="'+cssB+'"></div>';
sss +='<div id="ll_01" style="'+cssA+' clip:'+cp1+';"><img src="'+fil[0].src+'" id="ll_1" style="'+cssB+'"></div>';
sss +='<div id="rr_01" style="'+cssA+' clip:'+cp2+';"><img src="'+fil[0].src+'" id="rr_1" style="'+cssB+'"></div>';
$("zonQ").innerHTML=sss;//ページめくり分
$("MeQ").innerHTML=doc[0];//コメント分
$("ll_02").onclick=function (){chg(0);};//即時関数用に修正
$("rr_02").onclick=function (){chg(0);};//即時関数用に修正
$("ll_01").onclick=function (){chg(-1);};//即時関数用に修正
$("rr_01").onclick=function (){chg(1);};//即時関数用に修正
$("btQ").onclick=at;
if(page===1){at_start();}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
面白２２■１枚ページめくり縦横コメ付き 最終修正日 : 2016/08/04

　面白２２■１枚ページめくり縦横コメ付き　　　　最終修正日 : 2016/08/04
