[オープン][S][大小][バナー][レスポンシブ][広告用]3ボタン型統合スライドショーギャラリー cpSHD_adsg_3b_zdw

・　サンプルの説明: 　同じサイズ（同じアスペクト比であれば可）の写真を使う広告用のスライドショーギャラリーです。スライドショーの切り替えアニメーションはです。アニメーションの変更は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。スライドショーの写真をクリックすると設定したページにジャンプします。操作ボタンは3個で、モバイルではサムネイルギャラリー部分のタップ、パソコンではスライドショーにマウスを重ねると出てきます。; 　スライドショー動作中は中央の丸ボタンは「stopボタン」で、クリックで停止し「goボタン」に変わります。スライドショー動作中に訪問者が左右ボタンやサムネイルをクリックした場合も（興味を示したと判断し）停止し、中央の丸ボタンは「goボタン」に変わります。「goボタン」のクリックでスライドショーは再開し、ボタンは「stopボタン」に戻ります。; 　スライドショー用の写真はクラス名"base"のdiv要素の中の、クラス名"koboData"のa要素の背景画像として記述してください。 background-sizeの値は"cover"でも"contain"でも構いません。 a要素のhref属性にジャンプ先のURLを書いてください。; 　サムネイルギャラリーは、全サムネイルをスライドショー幅いっぱい横一列に表示します。即ち、写真の数が少なければサムネイルは大きくなり、写真の数が多くなるほどサムネイルは小さくなります。デザインを壊さない程度の数を使用してください。なお、サムネイルギャラリーがいらない時は、ソース中<!-- ここからサムネイルギャラリー。 --!>から<!-- ここまでサムネイルギャラリー。 --!>までを削除してください。スライドショー部分だけになります。; 　サムネイルの写真データはクラス名"gal_base"のdiv要素の中のimg要素です。通常はスライドショー用の写真の縮小版を使いますが別の写真でも構いません。すべて同じアスペクト比の画像を用意してください。スライドショーデータとサムネイルデータは、同じ順番で同じ数を記述してください。; 　表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。なお、バナー画像は EC designさんから借用しています。; 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

アスペクト比維持型
	⇔

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

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

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

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

/** 個々のデータ。 **/
.cpSHD_adsg_3b_zdw_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;background-repeat:no-repeat;background-position:center;background-size:cover;}

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

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSHD_adsg_3b_zdw_os .but_sl{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:10;width:40px;height:40px;border:0;outline:0;border-radius:50%;line-height:40px;color:#fff;font-family:'メイリオ';font-size:10px;text-align:center;cursor:pointer;opacity:0;transition-duration:0.5s;background-color:rgba(0,0,0,0.5);}
.cpSHD_adsg_3b_zdw_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSHD_adsg_3b_zdw_os .mae{position:absolute;top:0;bottom:0;left:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSHD_adsg_3b_zdw_os .mae::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(-135deg);position:absolute;top:0;bottom:0;left:4px;right:0;margin:auto;}
.cpSHD_adsg_3b_zdw_os:hover .mae{left:calc(20% - 25px);opacity:1;}
.cpSHD_adsg_3b_zdw_os .tugi{position:absolute;top:0;bottom:0;right:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSHD_adsg_3b_zdw_os .tugi::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(45deg);position:absolute;top:0;bottom:0;left:0;right:4px;margin:auto;}
.cpSHD_adsg_3b_zdw_os:hover .tugi{right:calc(20% - 25px);opacity:1;}

</style>

</div>

</div>

</div>

,k=n.querySelector(".base"),f=n.querySelector(".gal_base"),e=n.querySelector(".but_sl"),d=n.querySelector(".mae"),g=n.querySelector(".tugi"),o=k.querySelectorAll(".koboData"),u=f?f.querySelectorAll("img"):"",v=o.length,c,t=0,p=0,nt=1,w=!1,s=Copyright,b=HomePage,tt=MailAddress,rt=ContentType,l={iy:v,ya:ya,ke:ds},i=document.createElement("a"),a=function(){clearTimeout(c);y=!1;e.innerHTML="go"},ut=function(){y=!0;e.innerHTML="stop";h(t+1)},h=function(n){w||(w=!0,nt=n>t?1:-1,p=t,t=n,t+=l[b.substr(8,2)],t%=l[tt.substr(1,2)],document.querySelector(".c_"+s).href.substr(8,2)===s.substr(1,2)&&setTimeout(ft,50))},ft=function(){clearTimeout(c);af(n,k,ya,o[t],o[p],nt);f&&(u[p].style.opacity=1,u[t].style.opacity=.3);setTimeout(function(){y&&it();w=!1},l[tt.substr(2,2)]+100)},it=function(){clearTimeout(c);c=setTimeout(function(){h(t+1)},l[b.substr(11,2)])},r;if(f)for(r=0;r<v;r++)u[r].style.width=100/v+"%",u[r].ind=r,u[r].onclick=function(){this.ind!=t&&(a(),h(this.ind))};d&&(d.onclick=function(){a();h(t-1)});g&&(g.onclick=function(){a();h(t+1)});e&&(e.innerHTML=y?"stop":"go",e.onclick=function(){y?a():ut()});f&&(u[t].style.opacity=.3);o[t].style.zIndex=2;o[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+s)||(document.body.appendChild(i),i.setAttribute("href",b),i.setAttribute("class","c_"+s),i.innerHTML=rt+" (C) "+s,i.style.display="none",i.style.fontSize="12px",i.style.width="250px",i.style.margin="1ex auto");y&&it()})}(document.getElementById("

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

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

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

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

縦横方向がランダムで前進と後進は上下左右の方向性があるもの。
　縦横スクロール　縦横視差スクロール　縦横入れ替わり　縦横転がり　縦横3D回転　縦横3D裏返し　縦横3D入れ替わり　縦横3D逆入れ替わり　縦横CUBE回転　縦横CUBE枠内回転　縦横コーナー回転