[オープン][S][バナー][レスポンシブ][アクティブ][シャッフル][実行時ランダム][4画像][多種類]型統合スライドショーギャラリー集 cpSHDs_nhsg_ma_zdwp

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　同じサイズ（同じアスペクト比であれば可）の画像を使うスライドショーギャラリー集です。; 　操作ボタンは5個でスライドショーの右上に半透明で表示されています。通常の3個のボタンと、スライドショー速度とアニメーション速度を訪問者が選択するためのセレクトボックス2個です。モバイルではタップ、パソコンではマウスを重ねると不透明になります。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　サムネイルギャラリーは、全サムネイルをスライドショー幅いっぱい横一列に表示します。即ち、画像の数が少なければサムネイルは大きくなり、画像の数が多くなるほどサムネイルは小さくなります。デザインを壊さない程度の数を使用してください。なお、サムネイルギャラリーが不要の時は、ソース中<!-- ここからサムネイルギャラリー。 --!>から<!-- ここまでサムネイルギャラリー。 --!>までを削除してください。スライドショー部分だけになります。; 　画像表示部分のスタイルシートpadding-top:～%;の～部分に、「画像の高さ／画像の幅」を％で表した数値を書いてください。小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。; 　このスライドショーは、「カスタマイズ」でスライドショー実行時のアニメーションの進行方向をランダムに設定できます。当サイトのランダム型アニメーションのスライドショー以外は、通常型スライドショーの実行時のアニメーションの進行方向は右→左または下→上に、シャトル型は右→左と左→右・下→上と上→下の繰り返しにしてあります。即ち、次ボタンを押した時と同じ動作です。このスライドショーはランダム型アニメーション以外でも進行方向をランダムにできます。使用するアニメーションによって使い分けてください。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択ではなくす・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの画像をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　このスライドショーは、「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。; 　このスライドショーギャラリーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

アスペクト比維持型
下部ギャラリー型
	⇔
上部ギャラリー型
	⇔

・　下ギャラリー型スライドショーギャラリー

/** ページ全体。必要に応じて書き換えてください。 **/
body{font-family:"メイリオ";text-align:center;}

/** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpSHDs_nhsg_hma_zdwp_os{position:relative;top:0;left:0;width:100%;max-width:640px;margin:auto;overflow:hidden;}

/** 画像表示部分。アスペクト比維持型はpadding-top:～%;に画像の（高さ／幅）を％で書く。 **/
.cpSHDs_nhsg_hma_zdwp_os .base{position:relative;top:0;left:0;padding-top:75%;}

/** 個々のデータ。 **/
.cpSHDs_nhsg_hma_zdwp_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;}

/** サムネイル。 **/
.cpSHDs_nhsg_hma_zdwp_os .gal_base{position:relative;top:0;left:0;width:100%;display: flex;z-index:10;background-color:#fff;}
.cpSHDs_nhsg_hma_zdwp_os .gal_base img{cursor:pointer;transition-duration:.5s;}

/** ボタン。 **/
.cpSHDs_nhsg_hma_zdwp_os .mae,.cpSHDs_nhsg_hma_zdwp_os .tugi{width:50px;height:24px;cursor:pointer;background-color:#fff;border:0;}
.cpSHDs_nhsg_hma_zdwp_os .but_sl{width:55px;height:24px;cursor:pointer;background-color:#fff;border:0;}

/** 速度変更セレクトボックス。 **/
.cpSHDs_nhsg_hma_zdwp_os .ke_che,.cpSHDs_nhsg_hma_zdwp_os .ya_che{position:relative;top:0px;left:0px;width:55px;height:24px;box-sizing:border-box;border:0;}

/** ボタンの外枠。 **/
.cpSHDs_nhsg_hma_zdwp_os .con{position:absolute;top:13px;right:13px;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.2;}
.cpSHDs_nhsg_hma_zdwp_os .con:hover{opacity:1;}

</style>

</div>

</div>

<div class="con">
<button class="mae">prev</button>
<button class="but_sl">pause</button>
<button class="tugi">next</button>
<select class="ke_che" title="スライドショー速度">
<option value='2000'>2秒</option>
<option value='5000' selected>5秒</option>
<option value='10000'>10秒</option>
<option value='30000'>30秒</option>
</select>
<select class="ya_che" title="アニメーション速度">
<option value='600'>0.6秒</option>
<option value='800'>0.8秒</option>
<option value='1000'>1秒</option>
<option value='1500' selected>1.5秒</option>
<option value='2000'>2秒</option>
</select>
</div>

</div>

i=function(n,t,i,r,u){for(var e,c="."+r,o=n.querySelector("."+t),f=n.querySelector("."+i),s=o.querySelectorAll(c),l=f?f.querySelectorAll("img"):"",h=s.length;h;)e=Math.floor(Math.random()*h--),o.appendChild(s[e]),f&&f.appendChild(l[e]),h==0?u():(s=o.querySelectorAll(c),l=f?f.querySelectorAll("img"):"")},t=function(n){var d=n.querySelector(".base"),a=n.querySelector(".gal_base"),g=n.querySelector(".but_sl"),rt=n.querySelector(".mae"),ut=n.querySelector(".tugi"),e=d.querySelectorAll(".koboData"),h=a?a.querySelectorAll("img"):"",o=e.length,v,t=0,p=0,r=0,i=0,u=1,nt=!1,tt=!1,c=!1,w=Copyright,it=HomePage,ft=MailAddress,st=ContentType,b={iy:o,ya:da,ke:ds},f=document.createElement("a"),l=function(n,f){nt||(nt=!0,u=n>t?1:-1,tt&&slr&&(u=Math.floor(Math.random()*2)*2-1),p=t,t=n,t+=b[w.substr(1,2)],t%=b[ft.substr(1,2)],r=p-u,i=t+u,k(),document.querySelector(".c_"+w).href.substr(document.querySelector(".c_"+w).href.indexOf("/")+3,2)===w.substr(1,2)&&setTimeout(function(){ht(f)},50))},k=function(){r+=o;r%=o;i+=o;i%=o;r===t&&(r=r-u,k());i===p&&(i=i+u,k());r===i&&(i=i-u*2,k())},ht=function(f){clearTimeout(v);var o=Math.floor(Math.random()*(Object.keys(ani).length-2));ani[ot[o]](n,d,da,e[t],e[p],u,f,e[r],e[i]);tt=!1;a&&(h[p].style.opacity=1,h[t].style.opacity=.3);setTimeout(function(){y&&!c&&et();nt=!1},b[ft.substr(2,2)]+100)},et=function(){clearTimeout(v);v=setTimeout(function(){slr&&(tt=!0);l(t+1)},b[ft.substr(4,2)])},ot=Object.keys(ani),s;if(ot.splice(0,2),n.mp=document.createElement("div"),d.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",a)for(s=0;s<o;s++)h[s].style.width=100/o+"%",h[s].ind=s,h[s].onclick=function(){this.ind!=t&&l(this.ind)};rt&&(rt.onclick=function(){l(t-1)});ut&&(ut.onclick=function(){l(t+1)});g&&(g.innerHTML=y?"pause":"play",g.onclick=function(){y?(clearTimeout(v),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",l(t+1))});a&&(h[t].style.opacity=.3);e[t].style.zIndex=2;e[t].style.opacity=1;fb&&(window.addEventListener("blur",function(){y&&!c&&(c=!0,clearTimeout(v))},!1),window.addEventListener("focus",function(){y&&c&&(c=!1,l(t+1))},!1));window.addEventListener("load",function(){document.querySelector(".c_"+w)||(document.body.appendChild(f),f.setAttribute("href",it),f.setAttribute("class","c_"+w),f.innerHTML=st+" (C) "+w,f.style.display="none",f.style.fontSize="12px",f.style.width="250px",f.style.margin="1ex auto");

n.querySelector(".ke_che")&&(n.querySelector(".ke_che").onchange=function(){ds=n.querySelector(".ke_che")[this.selectedIndex].value-0;b.ke=n.querySelector(".ke_che")[this.selectedIndex].value-0});n.querySelector(".ya_che")&&(n.querySelector(".ya_che").onchange=function(){da=n.querySelector(".ya_che")[this.selectedIndex].value-0;b.ya=n.querySelector(".ya_che")[this.selectedIndex].value-0});

y&&!c&&et()})};sf?i(n,"base","gal_base","koboData",function(){t(n)}):t(n)}(document.getElementById("

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

・　上ギャラリー型スライドショーギャラリー

/** ページ全体。必要に応じて書き換えてください。 **/
body{font-family:"メイリオ";text-align:center;}

/** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpSHDs_nhsg_vma_zdwp_os{position:relative;top:0;left:0;width:100%;max-width:640px;margin:auto;overflow:hidden;}

/** 画像表示部分。アスペクト比維持型はpadding-top:～%;に画像の（高さ／幅）を％で書く。 **/
.cpSHDs_nhsg_vma_zdwp_os .base{position:relative;top:0;left:0;padding-top:75%;}

/** 個々のデータ。 **/
.cpSHDs_nhsg_vma_zdwp_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;}

/** サムネイル。 **/
.cpSHDs_nhsg_vma_zdwp_os .gal_base{position:relative;top:0;left:0;width:100%;display: flex;z-index:10;background-color:#fff;}
.cpSHDs_nhsg_vma_zdwp_os .gal_base img{cursor:pointer;transition-duration:.5s;}

/** ボタン。 **/
.cpSHDs_nhsg_vma_zdwp_os .mae,.cpSHDs_nhsg_vma_zdwp_os .tugi{width:50px;height:24px;cursor:pointer;background-color:#fff;border:0;}
.cpSHDs_nhsg_vma_zdwp_os .but_sl{width:55px;height:24px;cursor:pointer;background-color:#fff;border:0;}

/** 速度変更セレクトボックス。 **/
.cpSHDs_nhsg_vma_zdwp_os .ke_che,.cpSHDs_nhsg_vma_zdwp_os .ya_che{position:relative;top:0px;left:0px;width:55px;height:24px;box-sizing:border-box;border:0;}

/** ボタンの外枠。 **/
.cpSHDs_nhsg_vma_zdwp_os .con{position:absolute;bottom:13px;right:13px;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.2;}
.cpSHDs_nhsg_vma_zdwp_os .con:hover{opacity:1;}

</style>

</div>

</div>

</div>

・　別のアニメーションの組み合わせを作る: 下の「アニメーションコード」を参照し、ご希望のアニメーションの組み合わせ（一つでも可）文字列を作り、下の枠内に記述し、「この組み合わせで作る」ボタンをクリックしてください。その際、一つの時はアニメーションコードのみ、複数の時はアニメーションコードを半角文字の「&」で結合しで記述してください。
例えば、
縦横入れ替わり・縦横3D入れ替わり・縦横転がりの３個ならば「d_ire_xy&d_ire3D_xy&d_koro_xy」となります。
brightness・blur・ランダムclip-polygon・ランダムclip-circleの４個ならば「brightness&blur&polygon&circle」となります。
3D横ズーム入れ替わり・3D縦ズーム入れ替わりの２個ならば「ire3D_x&ire3D_y」となります。
ランダム透かし移動インアウトの１個だけならば「r_su_in_out」となります。
なお、何も書かずにクリックすると、枠内に薄い文字で表示されている組み合わせが作られます。
文字列の途中で改行したり空白や無関係の文字を入れたりすると、動かないスライドショーが作られます。
アニメーションの数に制限はありませんが、多くなると煩雑になるため３～５個程度が無難だと思います。

・　アニメーションコード（表記形式は、アニメーション名 ⇒ コード）: 方向性がないタイプで、前進でも後退でも変わらないもの。
｜　透かし ⇒ su　｜　フェード ⇒ fade　｜　落下 ⇒ rakka　｜　ブライトネス ⇒ brightness　｜　ブラー ⇒ blur　｜　ランダムクリップポリゴン ⇒ polygon　｜　ランダムクリップサークル ⇒ circle　｜　起き上がり ⇒ rise　｜　ショットズーム回転 ⇒ shot_zoom　｜　フラッシュ ⇒ flash　｜　ランダムワイプ ⇒ wipe　｜　; 方向性があるタイプで、前進と後退でアニメーションの方向が変わるもの。
｜　アップダウン ⇒ ud　｜　ダウンアップ ⇒ du　｜　ダウンジャンプ ⇒ dj　｜　ランダムアップダウン ⇒ uddu　｜　Z方向スクロール ⇒ z_sc　｜　せり出し ⇒ seri　｜　横転がり ⇒ koro_x　｜　縦転がり ⇒ koro_y　｜　横入れ替わり ⇒ ire_x　｜　縦入れ替わり ⇒ ire_y　｜　スクロール横 ⇒ sc_x　｜　スクロール縦 ⇒ sc_y　｜　透かしスクロール横 ⇒ susc_x　｜　透かしスクロール縦 ⇒ susc_y　｜　視差スクロール横 ⇒ shisa_x　｜　視差スクロール縦 ⇒ shisa_y　｜　視差透かしスクロール横 ⇒ sushisa_x　｜　視差透かしスクロール縦 ⇒ sushisa_y　｜　ランダム回転移動インアウト ⇒ in_out　｜　; 方向性があるタイプで、前進と後退で3Dアニメーションの方向が変わるもの。
｜　横3D回転 ⇒ rot_x　｜　縦3D回転 ⇒ rot_y　｜　CUBE横ズーム回転 ⇒ cube_x　｜　CUBE縦ズーム回転 ⇒ cube_y　｜　3D横ズーム入れ替わり ⇒ ire3D_x　｜　3D縦ズーム入れ替わり ⇒ ire3D_y　｜　3D横ズーム逆入れ替わり ⇒ rei3D_x　｜　3D縦ズーム逆入れ替わり ⇒ rei3D_y　｜　3D横ズーム裏返し ⇒ ura3D_x　｜　3D縦ズーム裏返し ⇒ ura3D_y　｜　3D横ズームスクロール ⇒ sc3D_x　｜　3D縦ズームスクロール ⇒ sc3D_y　｜　CUBE枠内横回転 ⇒ becu_x　｜　CUBE枠内縦回転 ⇒ becu_y　｜　ドア横回転 ⇒ door_x　｜　ドア縦回転 ⇒ door_y　｜　縦スウィング ⇒ swing_y　｜　縦ズームスウィング ⇒ z_swing_y　｜　; 方向性があるタイプで、前進と後退に関係なく3Dアニメーションの方向がランダムに変わり、縦方向と横方向もランダムに変わるもの。
｜　縦横前後ランダムズーム3D回転1 ⇒ r_xynp_z3D1　｜　縦横前後ランダムズーム3D回転2 ⇒ r_xynp_z3D2　｜　; 方向性があるタイプで、前進と後退で3Dアニメーションの方向が変わるが、縦方向と横方向がランダムに変わるもの。
｜　ランダム3D縦横ズーム裏返し ⇒ r_ura3D_xy　｜　ランダムタイミング3Dズーム裏返し ⇒ r_ura3D_ttf　｜　ランダム3D縦横ズーム入れ替わり ⇒ r_ire3D_xy　｜　ランダム3D縦横ズーム逆入れ替わり ⇒ r_rei3D_xy　｜　ランダム縦横ズームCUBE回転 ⇒ r_cube_xy　｜　ランダム縦横ズームコーナー回転 ⇒ r_corner_xy　｜　ランダム縦横ズーム3D回転1 ⇒ r_z3D_xy　｜　ランダム縦横ズーム3D回転2 ⇒ r_3D　｜　; 方向性があるタイプで、前進と後退でページめくりアニメーションの方向が変わるもの。
｜　射光型3D横ズームページめくり ⇒ page0　｜　射光型3D縦ズームページめくり ⇒ page05　｜　全回転型3D横ズームページめくり ⇒ page1　｜　全回転型3D縦ズームページめくり ⇒ page15　｜　2D摘みページめくり ⇒ page2　｜　2Dずらしページめくり ⇒ page3　｜　; 前進でも後退でもアニメーションの方向がランダムなもの。
｜　ランダム縦横スクロール ⇒ sc_xy　｜　ランダム方向移動 ⇒ sc_r　｜　ランダム方向視差移動 ⇒ shisa_r　｜　ランダムズーム ⇒ z　｜　円ワイプ ⇒ wipe_en　｜　ランダム回転入れ替わり ⇒ rot_ire　｜　ランダムタイミング移動 ⇒ sc_r_ttf　｜　ダウンアップジャンプ ⇒ duj　｜　ランダム透かし移動インアウト ⇒ r_su_in_out　｜　ランダム2D回転 ⇒ r_rot_2d　｜　; 前進・後退に関係なくアニメーションの方向が交互になるもの。シャトル型。
｜　左右シャトル型スクロール ⇒ s_sc_x　｜　上下シャトル型スクロール ⇒ s_sc_y　｜　左右シャトル型透かしスクロール ⇒ s_susc_x　｜　上下シャトル型透かしスクロール ⇒ s_susc_y　｜　左右シャトル型視差移動 ⇒ s_shisa_x　｜　上下シャトル型視差移動 ⇒ s_shisa_y　｜　左右シャトル型透かし視差移動 ⇒ s_sushisa_x　｜　上下シャトル型透かし視差移動 ⇒ s_sushisa_y　｜　左右シャトル型転がり ⇒ s_koro_x　｜　上下シャトル型転がり ⇒ s_koro_y　｜　前後シャトル型zスクロール ⇒ s_z_sc　｜　前後シャトル型せり出し ⇒ s_seri　｜　; 前進・後退に関係なく3Dアニメーションの方向が交互になるもの。シャトル型。
｜　左右シャトル型枠内CUBE回転 ⇒ s_becu_x　｜　上下シャトル型枠内CUBE回転 ⇒ s_becu_y　｜　左右シャトル型ズームCUBE回転 ⇒ s_cube_x　｜　上下シャトル型ズームCUBE回転 ⇒ s_cube_y　｜　左右シャトル型3D入れ替わり ⇒ s_ire3D_x　｜　上下シャトル型3D入れ替わり ⇒ s_ire3D_y　｜　左右シャトル型3D逆入れ替わり ⇒ s_rei3D_x　｜　上下シャトル型3D逆入れ替わり ⇒ s_rei3D_y　｜　左右シャトル型3D裏返し ⇒ s_ura3D_x　｜　上下シャトル型3D裏返し ⇒ s_ura3D_y　｜　左右シャトル型ドア回転 ⇒ s_door_x　｜　上下シャトル型ドア回転 ⇒ s_door_y　｜　; アニメーションにrequestAnimationFrameメソッドを使用したもの。
｜　rAF型びろ～ん ⇒ rAF_OutZ　｜　rAF型弾性移動 ⇒ rAF_FeIdo　｜　rAF型弾性二段階ズーム ⇒ rAF_Rm2StZ　｜　rAF型ランダム弾性移動 ⇒ rAF_RmReIdo　｜　rAF型弾性ズーム ⇒ rAF_RmZ　｜　rAF型バウンスズーム ⇒ rAF_BoZ　｜　rAF型ランダム回転ズーム ⇒ rAF_RZrot　｜　; 縦型と横型が合体したアニメーション。ドラッグ・フリック・マウスホイール操作ができるスライドショーで機能を発揮できる。
｜　縦横連動ランダムズーム3D回転1 ⇒ d_r_z3D_xy　｜　縦横連動ランダムズーム3D回転2 ⇒ d_r_3D_xy　｜　縦横スクロール ⇒ d_sc_xy　｜　縦横透かしスクロール ⇒ d_susc_xy　｜　縦横視差スクロール ⇒ d_shisa_xy　｜　縦横透かし視差スクロール ⇒ d_sushisa_xy　｜　縦横入れ替わり ⇒ d_ire_xy　｜　縦横転がり ⇒ d_koro_xy　｜　縦横3D回転 ⇒ d_rot_xy　｜　縦横3D裏返し ⇒ d_ura3D_xy　｜　縦横3D入れ替わり ⇒ d_ire3D_xy　｜　縦横3D逆入れ替わり ⇒ d_rei3D_xy　｜　縦横CUBE回転 ⇒ d_cube_xy　｜　縦横コーナー回転 ⇒ d_corner_xy　｜　縦横CUBE枠内回転 ⇒ d_becu_xy　｜　; 縦型と横型が合体した4画像アニメーション。4画像に対応したスライドショーのみで使用可。
｜　縦横インアウトバックカルーセル ⇒ d4_ca_inoutback_xy　｜　縦横透かしインアウトバックカルーセル ⇒ d4_suca_inoutback_xy　｜　ズーム縦横インアウトバックCUBE回転 ⇒ d4_zcube_inoutback_xy　｜　ズーム縦横インアウトバックCORNER回転 ⇒ d4_zcorner_inoutback_xy　｜　ズーム縦横インアウトバック3Dスクロール ⇒ d4_zsc3D_inoutback_xy　｜　ズーム縦横インアウトバック転がり ⇒ d4_koro_inoutback_xy　｜　ズーム縦横インアウトバック3D回転 ⇒ d4_z3Drot_inoutback_xy　｜