・　サンプルの説明

　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

　同じサイズ（同じアスペクト比であれば可）で連番のファイル名の写真を使うスライドショーです。 アニメーションはです。 他のアニメーションへのリンクはこのページ最下部にあります。 連番のファイル名とは、0.jpg・1.jpg・2.jpg～ や 12.jpg・13.jpg・14.jpg～ などの、連続する正の整数値として成り立つ数字をファイル名にした写真群です。 例えばファイル名が 700.jpg の写真は使えますが 007.jpg は使えません。 もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。 連番の最初の数字は何番でも構いません。 「書き換える部分」で最初と最後の数字と写真へのパスを設定してください。

　操作ボタンは3個でスライドショー右下に半透明に表示されています。モバイルではタップ、パソコンではマウスを重ねると不透明になります。

　写真表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。 小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。

　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できますが、スクリプト内「カスタマイズ」の下にある著作権表記を消す事を禁止します。

アスペクト比維持型
	⇔

・　3ボタン横型スライドショー

　写真表示部分のスタイルシートでpadding-top:～%;に写真の（高さ／幅）を％で書いてください。このサンプルは（３／４）の横長の写真を使っているため75%です。

<!---ここからスタイルシート。↓---> <style type="text/css"> /** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/ .cpSR_nsl_h3b_dw_os{position:relative;top:0;left:0;width:100%;max-width:640px;margin:auto;overflow:hidden;} /** 写真表示部分。アスペクト比維持型はpadding-top:～%;に写真の（高さ／幅）を％で書く。 **/ .cpSR_nsl_h3b_dw_os .base{position:relative;top:0;left:0;padding-top:75%;} /** 個々のデータ。 **/ .cpSR_nsl_h3b_dw_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;} /** ボタン。 **/ .cpSR_nsl_h3b_dw_os .mae,.cpSR_nsl_h3b_dw_os .tugi,.cpSR_nsl_h3b_dw_os .but_sl{width:60px;height:24px;cursor:pointer;} /** ボタンの外枠。 **/ .cpSR_nsl_h3b_dw_os .con{position:absolute;bottom:10px;right:10px;z-index:20;padding:6px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;opacity:0.1;} .cpSR_nsl_h3b_dw_os .con:hover{opacity:1;} </style> <!-- ここまでスタイルシート。↑ --> <!---ここからスライドショーHTML。↓---> <div class = "cpSR_nsl_h3b_dw_os" id = " "> <!-- ここから写真表示部分。↓ --> <div class="base"></div> <!-- ここまで写真表示部分。↑ --> <!-- ここからボタン。↓ --> <div class="con"> <button class="mae">prev</button> <button class="but_sl">pause</button> <button class="tugi">next</button> </div> <!-- ここまでボタン。↑ --> </div> <!---ここまでスライドショーHTML。↑---> "use strict";! function(n){var //--------- カスタマイズ↓ ---------- ds = 5000, //--スライドショー速度（ミリ秒単位）。 da = 1000, //--アニメーション速度（ミリ秒単位）。 y = true, //--自動開始はtrue、手動開始はfalse。 fp = 0, //--最初の番号（ファイル名0.jpgの写真）。 lp = 11, //--最後の番号（ファイル名11.jpgの写真）。 pp = "http://miyakejs.html.xdomain.jp/img/", //--写真へのパス。 //--------- カスタマイズ↑ ---------- Copyright = "Miyake_kobo", HomePage = "http://miyake.g2.xrea.com/", MailAddress = "miyake_kobo@yahoo.co.jp", ContentType = "Open version Slideshow", af= ;for(var e=n.querySelector(".base"),c=n.querySelector(".but_sl"),p=n.querySelector(".mae"),w=n.querySelector(".tugi"),l=[],u=[],b="",k=lp-fp+1,o,t=0,d=0,g=1,a=!1,f=Copyright,v=HomePage,nt=MailAddress,it=ContentType,s={iy:k,ya:da,ke:ds},i=document.createElement("a"),h=function(n){a||(a=!0,g=n>t?1:-1,d=t,t=n,t+=s[v.substr(8,2)],t%=s[nt.substr(1,2)],document.querySelector(".c_"+f).href.substr(8,2)===f.substr(1,2)&&setTimeout(rt,50))},rt=function(){clearTimeout(o);af(n,e,da,u[t],u[d],g);setTimeout(function(){y&&tt();a=!1},s[nt.substr(2,2)]+100)},tt=function(){clearTimeout(o);o=setTimeout(function(){h(t+1)},s[v.substr(11,2)])},r=0;r<k;r++)l[r]=new Image,l[r].src=pp+(r+fp)+".jpg",b+='<img class="koboData" src="'+l[r].src+'" />';e.innerHTML=b;u=e.querySelectorAll(".koboData");p&&(p.onclick=function(){h(t-1)});w&&(w.onclick=function(){h(t+1)});c&&(c.innerHTML=y?"pause":"play",c.onclick=function(){y?(clearTimeout(o),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",h(t+1))});u[t].style.zIndex=2;u[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+f)||(document.body.appendChild(i),i.setAttribute("href",v),i.setAttribute("class","c_"+f),i.innerHTML=it+" (C) "+f,i.style.display="none",i.style.fontSize="12px",i.style.width="250px",i.style.margin="1ex auto");y&&tt()})}(document.getElementById(" ")) <!---ここからスクリプト。↓---> <script type="text/javascript"> </script> <!---ここまでスクリプト。↑--->

・　別のアニメーションを見る

前進と後進で動作方向が反転するもの。
　 スクロール横 　 スクロール縦 　 視差スクロール横 　 視差スクロール縦 　 横転がり 　 縦転がり 　 横入れ替わり 　 縦入れ替わり 　 CUBE枠内横回転 　 CUBE枠内縦回転 　 アップダウン 　 ダウンアップ 　 ランダムアップダウン 　 ランダム回転入れ替わり 　 せり出し 　 ランダム回転移動インアウト 　 ドア横回転 　 ドア縦回転 　 横3D回転 　 縦3D回転 　 円ワイプ

ランダムな方向に動作するもの、または方向性がないもの。
　 落下 　 起き上がり 　 透かし 　 brightness 　 ランダムclip-polygon 　 ランダムclip-circle 　 ランダムズーム 　 ショットズーム回転 　 フラッシュ 　 ランダムワイプ

ズーム3Dアニメーションを使ったもの。
　 ランダム縦横ズーム3D回転1 　 ランダム縦横ズーム3D回転2 　 3D横ズーム裏返し 　 3D縦ズーム裏返し 　 ランダム3D縦横ズーム裏返し 　 3D横ズーム入れ替わり 　 3D縦ズーム入れ替わり 　 ランダム3D縦横ズーム入れ替わり 　 3D横ズーム逆入れ替わり 　 3D縦ズーム逆入れ替わり 　 ランダム3D縦横ズーム逆入れ替わり 　 CUBE横ズーム回転 　 CUBE縦ズーム回転 　 ランダム縦横ズームCUBE回転 　 3D横ズームスクロール 　 3D縦ズームスクロール

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.