[オープン][S][バナー][レスポンシブ][アクティブ][シャッフル]3ボタン型統合スライドショー集 cpSHDs_nhsl_3b_zdwp

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　同じサイズ（同じアスペクト比であれば可）の写真を使うスライドショーです。アニメーションはです。他のアニメーションへのリンクはこのページ最下部にあります。操作ボタンは3個でスライドショー右下に半透明に表示されています。モバイルではボタンをタップ、パソコンではボタンにマウスを重ねると不透明になります。スライドショー用の写真はクラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素で記述してください。バナーにする時は、クラス名"koboData"のa要素を使い、写真は背景画像にします。background-sizeの値は"cover"でも"contain"でも構いません。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。; 　表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

アスペクト比維持型
横長の写真
	⇔
縦長の写真
	⇔

・　3ボタン横型スライドショー: 　表示部分のスタイルシートでpadding-top:～%;に写真の（高さ／幅）を％で書いてください。このサンプルは（３／４）の横長の写真を使っているため75%です。アクティブ機能ON、シャッフル機能ONです。

</div>

<div class="con">
<button class="mae">prev</button>
<button class="but_sl">pause</button>
<button class="tugi">next</button>
</div>

</div>

,l=n.querySelector(".base"),sh=function(n,t,i,r){for(var s,f="."+i,u=n.querySelector("."+t),e=u.querySelectorAll(f),o=e.length;o;)s=Math.floor(Math.random()*o--),u.appendChild(e[s]),o==0?(n.m=u.querySelectorAll(f),r()):e=u.querySelectorAll(f)},mt=function(n){var s=n.querySelector(".but_sl"),a=n.querySelector(".mae"),v=n.querySelector(".tugi"),r=l.querySelectorAll(".koboData"),d=r.length,f,t=0,p=0,w=1,h=!1,yy=!1,u=Copyright,c=HomePage,b=MailAddress,g=ContentType,e={iy:d,ya:da,ke:ds},i=document.createElement("a"),o=function(n){h||(h=!0,w=n>t?1:-1,p=t,t=n,t+=e[c.substr(8,2)],t%=e[b.substr(1,2)],document.querySelector(".c_"+u).href.substr(8,2)===u.substr(1,2)&&setTimeout(nt,50))},nt=function(){clearTimeout(f);af(n,l,da,r[t],r[p],w);setTimeout(function(){y&&!yy&&k();h=!1},e[b.substr(2,2)]+100)},k=function(){clearTimeout(f);f=setTimeout(function(){o(t+1)},e[c.substr(11,2)])};a&&(a.onclick=function(){o(t-1)});v&&(v.onclick=function(){o(t+1)});s&&(s.innerHTML=y?"pause":"play",s.onclick=function(){y?(clearTimeout(f),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",o(t+1))});r[t].style.zIndex=2;r[t].style.opacity=1;n.mp=document.createElement("div");l.appendChild(n.mp);n.mp.style.position="absolute";n.mp.style.top="0px";n.mp.style.left="0px";n.mp.style.zIndex=0;n.mp.style.width="100%";n.mp.style.height="100%";n.mp.style.display="none";n.mp.style.transitionProperty="transform,left,clip";n.mp.style.backgroundColor="#fff";window.addEventListener("load",function(){document.querySelector(".c_"+u)||(document.body.appendChild(i),i.setAttribute("href",c),i.setAttribute("class","c_"+u),i.innerHTML=g+" (C) "+u,i.style.display="none",i.style.fontSize="12px",i.style.width="250px",i.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!yy&&(yy=!0,clearTimeout(f))},!1),window.addEventListener("focus",function(){y&&yy&&(yy=!1,o(t+1))},!1));y&&!yy&&k()})};sf?sh(n,"base","koboData",function(){mt(n)}):mt(n)}(document.getElementById("

　以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。見本の写真は、パソコンでの編集では表示されますが、Web上にアップすると表示されません。可能ならば、スタイルシート部分はHEAD内に移動してください。また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。

・　3ボタン縦型スライドショー: 　表示部分のスタイルシートでpadding-top:～%;に写真の（高さ／幅）を％で書いてください。このサンプルは（４／３）の縦長の写真を使っているため133.34%です。アクティブ機能ON、シャッフル機能OFFです。; 　使用している画像「月の接近と文明の壊滅」は生成AIのCopilotで作ったものです。

</div>

<div class="con">
<button class="mae">prev</button>
<br />
<button class="but_sl">pause</button>
<br />
<button class="tugi">next</button>
</div>

</div>

・　別のアニメーションを見る: 前進と後進で動作方向が反転するもの。
　スクロール横　スクロール縦　 Z方向スクロール　視差スクロール横　視差スクロール縦　横転がり　縦転がり　横入れ替わり　縦入れ替わり　 CUBE枠内横回転　 CUBE枠内縦回転　アップダウン　ダウンアップ　ランダムアップダウン　せり出し　ランダム回転移動インアウト　ドア横回転　ドア縦回転　横3D回転　縦3D回転　円ワイプ　 2D摘みページめくり　 2Dずらしページめくり　 rAF型弾性二段階ズーム

ランダムな方向に動作するもの、または方向性がないもの。
　落下　起き上がり　透かし　 brightness 　ランダムclip-polygon 　ランダムclip-circle 　ランダムズーム　ショットズーム回転　フラッシュ　ランダムワイプ　ランダム回転入れ替わり　ランダム2D回転　 rAF型弾性移動　 rAF型びろ～ん

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

シャトル型。アニメーションの動作方向が、next・prevに関係なく、左右や上下や前後を繰り返す。
　前後シャトル型zスクロール　左右シャトル型スクロール　上下シャトル型スクロール　左右シャトル型視差移動　上下シャトル型視差移動　前後シャトル型せり出し　左右シャトル型転がり　上下シャトル型転がり　左右シャトル型枠内CUBE回転　上下シャトル型枠内CUBE回転　左右シャトル型ズームCUBE回転　上下シャトル型ズームCUBE回転　左右シャトル型3D入れ替わり　上下シャトル型3D入れ替わり　左右シャトル型3D逆入れ替わり　上下シャトル型3D逆入れ替わり　左右シャトル型3D裏返し　上下シャトル型3D裏返し　左右シャトル型ドア回転　上下シャトル型ドア回転