面白１４■１枚ページめくりコメ付き

<!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"><!--

/*★必須。ページめくり領域の指定。この指定の中ではpaddingは使用しないこと*/
#wakuP{
position:relative;/*★必須。位置指定。必ずposition:●●;を使用して指定すること*/
margin:50px auto;/*★中央配置(上下、左右）*/
width:600px;/*★必須。スライド画像横幅*/
height:300px;/*★必須。スライド画像縦幅*/
border-width:2px 2px 30px 2px;/*★枠線の太さ(上、右、下、左の時計回り)。お好みで*/
border-color:#333;/*★枠線の色黒色。お好みで*/
border-style:solid;/*★枠線の種類。お好みで*/
}

/*★以下はコメントの指定。#wakuPを基準としたposition:absolute;で指定*/
#MeP { position:absolute; bottom:-25px;width:600px; text-align:center;color:#eee;}

--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->

<div id="wakuP"><!--★ページめくり領域開始。id="wakuP"は必須-->

<div id="zonP"></div><!--★ページめくり分。id="zonP"は必須-->

<div id="MeP"></div><!--★コメント分。id="MeP"は必須-->

</div><!--★ページめくり領域の終了-->

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

//★画像とコメントの同時指定。増減可能。['画像','コメント'];　の２個をこの順番で記述。コメントにタグも使用可能
var ga=new Array();
ga[n++]=['gh1.jpg','ギンガメアジの群れ'];
ga[n++]=['gh2.jpg','アテナの聖使徒聖堂'];
ga[n++]=['gh3.jpg','シェイク・ザーイド・モスク'];
ga[n++]=['gh4.jpg','花の蜜を集めるミツバチ'];
ga[n++]=['gh5.jpg','木の上のレッサーパンダ'];

var myurl="";       //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var nostop=1;       //★自動なら 1、画像クリックで入れ替えるときは 0
var spd=150;        //★原本50。自動切替速度。小さいほど速い。
var stsec=2000;     //★原本2000。クリックで入れ替えるときの速度（ミリ秒）

//指定ここまで-----------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p][0];}
var imgw=wakuP.clientWidth, imgh=wakuP.clientHeight;//waku範囲指定に修正

var move=Math.floor(imgw/10);//めくれる速度。ＱＰＯＮ参照
imgw=move*10;//imgw=move*10//移動ピッチ。この行が無いと動作しない。ＱＰＯＮ参照
var hfw=Math.floor(imgw/2);//スライド横幅半分
var i=1;
var oc=(nostop)?"":onclick=function (){imgchange();};//即時関数用に修正
var tl=(nostop)?"":"クリックしてください";
var cssA='position:absolute;left:0;top:0;';
var css1=cssA+'clip:rect(0, "+ hfw+"px, auto, 0);';
var css2=cssA+'clip:rect(0, auto, auto, "+ hfw+"px);';
var sss ="<img src="+myurl+ga[0][0]+" id='IMG1' style='"+css1+"'>";
sss +="<img src="+myurl+ga[1][0]+" id='IMG3' "+oc+" title='"+tl+"' style='"+cssA+" clip:rect(0, auto, auto, "+ hfw+"px);'>";
sss +="<img src="+myurl+ga[0][0]+" id='IMG2' "+oc+" title='"+tl+"' style='"+css2+"'>";
document.getElementById("zonP").innerHTML=sss;//修正
document.getElementById("MeP").innerHTML=ga[0][1];//ページ開始時のコメント分追加

var w=0,IMGw=imgw, flag=0, Rclip, Lclip, Lposition;
function imgchange(){
if(IMGw===move && !flag){IMG2.src=myurl+ga[i][0]; MeP.innerHTML=ga[i][1]; flag=1;}//コメント分追加
if(IMGw===imgw && flag){i++;i%=ga.length;IMG3.src=myurl+ga[i][0]; flag=0;}
if(!flag){IMGw=imgw-w;Rclip=imgw-w/2;Lclip=hfw-w/2;Lposition=w/2;w+=move;}//修正
else{IMGw=imgw-w; Rclip=hfw-w/2; Lclip=0; Lposition=w/2; w-=move; if(!w){IMG1.src=myurl+ga[i][0];}//修正
}
IMG2.style.width= IMGw+"px";
IMG2.style.height=imgh+"px";
IMG2.style.clip = "rect(0, "+Rclip+"px, auto, "+Lclip+"px)";
IMG2.style.left= Lposition+"px";
if(IMGw===imgw && flag){if(nostop)setTimeout(imgchange,stsec);}
else{setTimeout(imgchange,spd);}
}
if(nostop)setTimeout(imgchange,stsec);
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
面白１４■１枚ページめくりコメ付き UP日時 : 2016/07/14

　面白１４■１枚ページめくりコメ付き　　　　UP日時 : 2016/07/14
