)

<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ブック型スライドショー</title> <script language="JavaScript"> <!-- dt=new Array(); img_r=new Array(); img_l=new Array(); //データ //右と左(又は下と上)に表示するファイル名をコンマで区切って記入 //(左右同じファイルにすると「裏絵」になります) n=0;dt[n]="000.jpg,050.jpg"; n++;dt[n]="295.jpg,010.jpg"; n++;dt[n]="293.jpg,011.jpg"; n++;dt[n]="286.jpg,012.jpg"; n++;dt[n]="234.jpg,013.jpg"; n++;dt[n]="227.jpg,014.jpg"; n++;dt[n]="199.jpg,000.jpg"; //↑ページのあるだけ記入してください //イメージファイルのあるフォルダー img_url="http://qpon-toyota.com/nobana/img/"; //設定 mekuri=2;//写真のめくり方向(右→左=0 ,左→右=1,下→上=2, 上→下=3) ura_flg=0;//裏絵を鏡像にするときは「1」にしてください img_w=220;//写真の横幅 img_h=350;//写真の縦幅 img_wh=img_w;if(mekuri>=2){img_wh=img_h;} img_top=100;//写真の表示縦位置 waku=5;//中心の余白 kage=1;//写真の影の太さ(消したければ「0」) //イメージの先読み for(i=0;i<=n;i++){ dd=dt[i].split(","); img_r[i]=new Image();img_r[i].src=img_url+dd[0]; img_l[i]=new Image();img_l[i].src=img_url+dd[1]; } img_center=screen.width/2;//横位置(画面中央:数値指定可) img_left=img_center-img_w;//表示左上位置 flg=0;//動作中フラグ w=0;//伸縮中長さ hanten=new Array("",";filter:flipH(enable=1)");//鏡像(左右)タグ hanten_v=new Array("",";filter:flipV(enable=1)");//鏡像(上下)タグ hyoji=new Array("",";visibility:hidden");//表示・非表示タグ stp=img_w/10;if(mekuri>=2){tp=img_h/10;}//移動ピッチ rl=stp*1; vv=1-(mekuri%2)*2; no=n*(mekuri%2); //めくる function mov(p,v){ vv=v; if(at_flg==1){ alert("自動実行中、[手動]ボタンで切り替えてください"); return; } if(flg==0){ no=p; w=img_wh*(v+1);rl=stp*vv*-1; mv(); flg=1; } } //移動サブルーチン function mv(){ w=w+rl; if(w>img_wh*2+stp*0.9 || w<0-stp*0.9){ clearTimeout(tm); flg=0; return; } if(w<=img_wh){ if(mekuri<2){ document["img_r"+no].width=img_w-w; }else{ document["img_r"+no].height=img_h-w; } if(rl<0){ document.getElementById("r_"+no).style.visibility="visible"; document.getElementById("l_"+no).style.visibility="hidden"; } }else{ if(rl>0){ document.getElementById("r_"+no).style.visibility="hidden"; document.getElementById("l_"+no).style.visibility="visible"; } if(mekuri<2){ document["img_l"+no].width=w-img_w; document.getElementById("l_"+no).style.left=img_center+img_w-w-(waku); }else{ document["img_l"+no].height=w-img_h; document.getElementById("l_"+no).style.top=img_top+img_h*2-w-(waku); } } tm=setTimeout("mv()",50); } //ネットスケープ4.7 function ie_nn(){ if(document.layers){ alert("ネットスケープ6以上か\nインターネットエクスプローラでご覧ください。"); history.go(-1); } } //自動 at_flg=0; function aut(){ if(at_flg==0){ at_no=no-vv; aut_sub(); document.at_f.at_e.value="手動に切替"; at_flg=1; }else{ at_flg=0; clearTimeout(at_tim); document.at_f.at_e.value="自動に切替"; } } function aut_sub(){ if(at_no<0){ at_no=0; vv=vv*-1; } if(at_no>n){ at_no=n; vv=vv*-1; } no=at_no; if(mekuri<2){ w=img_w*(vv+1); }else{ w=img_h*(vv+1); } rl=stp*vv*-1; mv(); at_no=at_no-vv; at_tim=setTimeout("aut_sub()",3000); } // --> </script> </head> <body onload="ie_nn();aut()"> <script language="JavaScript"> <!-- c=img_center-img_w-waku-5; document.write('<DIV id="tp" style="position:absolute;top:10;left:',c,'">'); document.write('<table border=0 width=',img_w*2+10+waku,'><tr><td>'); document.write('<center>'); document.write('<font size=6 color=#000000>ブック型スライドショー</font><br>'); document.write('<font size=2>写真をクリックすると、本のようにめくれます。</font>'); document.write('<br>'); document.write('</center>'); document.write('</td></tr></table>'); document.write('</DIV>'); //台紙 if(mekuri<2){ document.write('<DIV id="bk" style="position:absolute;top:',img_top-4,';left:',c,'">'); document.write('<table border=1 bgcolor=#cccccc height=',img_h+10,' width=',img_w*2+10+waku,'>'); document.write('<tr><td><br></td><td><br></td></tr></table>'); }else{ document.write('<DIV id="bk" style="position:absolute;top:',img_top-9-waku,';left:',img_center-img_w/2-waku,'">'); document.write('<table border=1 bgcolor=#cccccc height=',img_h*2+10+waku*2,' width=',img_w+5+waku,'>'); document.write('<tr><td><br></td></tr><tr><td><br></td></tr></table>'); } document.write('<center><form name="at_f">'); document.write('<input type=button name="at_e" value="自動に切替" onClick="aut()">'); document.write('</form>'); document.write('<a href="http://www001.upp.so-net.ne.jp/kuma3/" target="new_win">'); document.write('<font size=1 color=#888888>提案:熊谷さん</font></a> '); document.write('<a href="http://www2a.biglobe.ne.jp/~qpon/" target="new_win">'); document.write('<font size=1 color=#888888>製作:QPON</font></a><br>'); document.write('</center></DIV>'); //カード配置 for(i=0;i<=n;i++){ if(mekuri<2){ document.write('<DIV id="r_',i,'" style="position:absolute;top:',img_top,';'); document.write('left:',img_center,';z-index:',n*2-i,hyoji[mekuri%2],'">'); document.write('<IMG SRC="',img_r[i].src,'" galleryimg="no" WIDTH=',img_w*(1-mekuri%2),' HEIGHT=',img_h); document.write(' name="img_r',i,'" border=',kage,' onClick="mov(',i,',-1)">'); document.write('</DIV>'); document.write('<DIV id="l_',i,'" style="position:absolute;top:',img_top,';left:'); document.write(img_center-((img_w+waku)*(mekuri%2)),';z-index:',i,hyoji[1-(mekuri%2)],hanten[ura_flg],'">'); document.write('<IMG SRC="',img_l[i].src,'" galleryimg="no" WIDTH=',img_w*(mekuri%2),' HEIGHT=',img_h); document.write(' name="img_l',i,'" border=',kage,' onClick="mov(',i,',1)" >'); document.write('</DIV>'); }else{ document.write('<DIV id="r_',i,'" style="position:absolute;top:',img_top+img_h); document.write(';left:',img_center-img_w/2,';z-index:',n*2-i,hyoji[mekuri%2],'">'); document.write('<IMG SRC="',img_r[i].src,'" galleryimg="no" WIDTH=',img_w,' HEIGHT=',img_h*(1-(mekuri%2))); document.write(' name="img_r',i,'" border=',kage,' onClick="mov(',i,',-1)">'); document.write('</DIV>'); document.write('<DIV id="l_',i,'" style="position:absolute;top:',img_top+img_h-((img_h+waku)*(mekuri%2))); document.write(';left:',img_center-img_w/2,';z-index:',i,hyoji[1-(mekuri%2)],hanten_v[ura_flg],'">'); document.write('<IMG SRC="',img_l[i].src,'" galleryimg="no" WIDTH=',img_w,' HEIGHT=',img_h*(mekuri%2)); document.write(' name="img_l',i,'" border=',kage,' onClick="mov(',i,',1)" >'); document.write('</DIV>'); } } //--> </script> </body> </html>
初めから自動めくりにするには<BODY>タグ内に「onLoad="aut()"」を追加

ソースをお使いの場合は出来るだけ私のホームページにリンクを貼ってください。
URL:http://www2a.biglobe.ne.jp/~qpon/    バナー:還暦QPON