[オープン][S][レスポンシブ][アクティブ][多種類]パソコンとスマホで画像を換えるガイド付きスライドショーcpSHD_nacgusl_ma_zdwp

ガイド付きスライドショー。「カスタマイズ」で自動スタートとアクティブ機能はtrueにしてあります。

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

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

/** 個々のデータ。 **/
.cpSHD_nacgusl_ma_zdwp_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;-webkit-background-size:cover;background-size:cover;}

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

/** ガイド。 **/
.cpSHD_nacgusl_ma_zdwp_os .guide{position:relative;top:0px;left:0px;z-index:20;width:100%;background-color:#444;box-sizing:border-box;padding:5px 0px;}
.cpSHD_nacgusl_ma_zdwp_os .guide div{position:relative;top:0px;left:0px;display:inline-block;height:18px;width:18px;font-size:12px;cursor:pointer;border-radius:50%;margin:0px 3px;transition-duration:.5s;}
.cpSHD_nacgusl_ma_zdwp_os .guide div:hover{transform:rotate(360deg);}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSHD_nacgusl_ma_zdwp_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_nacgusl_ma_zdwp_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSHD_nacgusl_ma_zdwp_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_nacgusl_ma_zdwp_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_nacgusl_ma_zdwp_os:hover .mae{left:calc(20% - 25px);opacity:1;}
.cpSHD_nacgusl_ma_zdwp_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_nacgusl_ma_zdwp_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_nacgusl_ma_zdwp_os:hover .tugi{right:calc(20% - 25px);opacity:1;}

/** スマホ用の画像を書く。 **/
.sl_1 .koboData:nth-of-type(1){background-image:url('../img/4.jpg');}
.sl_1 .koboData:nth-of-type(2){background-image:url('../img/3.jpg');}
.sl_1 .koboData:nth-of-type(3){background-image:url('../img/2.jpg');}
.sl_1 .koboData:nth-of-type(4){background-image:url('../img/7.jpg');}
.sl_1 .koboData:nth-of-type(5){background-image:url('../img/1.jpg');}
.sl_1 .koboData:nth-of-type(6){background-image:url('../img/5.jpg');}
.sl_1 .koboData:nth-of-type(7){background-image:url('../img/0.jpg');}

/** パソコン用とスマホ用を換えるWindow幅。取り換えない時は以下を削除。 **/
@media screen and (min-width:700px){

/** スマホ用のスライドショー全体の高さ **/
.ScYSL{height:640px;}

/** パソコン用の画像を書く。 **/
.sl_1 .koboData:nth-of-type(1){background-image:url('../img79/0.jpg');}
.sl_1 .koboData:nth-of-type(2){background-image:url('../img79/1.jpg');}
.sl_1 .koboData:nth-of-type(3){background-image:url('../img79/2.jpg');}
.sl_1 .koboData:nth-of-type(5){background-image:url('../img79/4.jpg');}
.sl_1 .koboData:nth-of-type(7){background-image:url('../img79/6.jpg');}
.sl_1 .koboData:nth-of-type(6){background-image:url('../img79/12.jpg');}
.sl_1 .koboData:nth-of-type(4){background-image:url('../img79/13.jpg');}

}

</style>

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

・　サンプルの説明: 　パソコンでは大きい画像、スマホでは小さい画像、に自動的に交換するスライドショーです。同じ画像の大小だけではなく、このページの様に別々の画像も使えます。ただし、Windowの幅を測って画像を取り換えますので、パソコンでもWindow幅を設定した数値以下に縮めると、スマホ用の画像が表示されます。; 　画像のデータはHEAD内のスタイルシートに、パソコン用とスマホ用の両方を記述してください。 HTMLの画像表示部分には空のdiv要素を画像の枚数分記述してください（下のソース参照）。; 　画像部分のスタイルシートpadding-top:～%;の～部分に、「表示部分の高さ／表示部分の幅」を％で表した数値を書いてください。画像は画像表示部分をカバーする大きさにリサイズして表示されます。即ち、画像表示部分のアスペクト比と画像のアスペクト比が一致しない場合は、縦・横いずれかの両端がトリミングされます。; 　同じサイズ（同じアスペクト比であれば可）の画像を使うスライドショーです。 img要素、またはdiv要素の背景画像として使用しています。操作ボタンは3個で、モバイルでは画像部分のタップ、パソコンではスライドショーにマウスを重ねると出てきます。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　ガイドボタンで操作する事もできます。ガイドボタンはクラス名"guide"のdiv要素を作っておけばスクリプトが自動的に設置します。ガイドが不要の時はクラス名"guide"のdiv要素を削除してください。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択ではなくす・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの画像をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　表示部分のスタイルシートpadding-top:～%;の～部分に、「表示部分の高さ／表示部分の幅」を％で表した数値を書いてください。小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。; 　使用している画像は生成AIのCopilotで作ったものです。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。; 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

アスペクト比維持型
	⇔

・　サンプルのHEAD内のソース: 　以下のソースコードをスライドショーを貼り付けるページのHEAD内にコピーし、ご自身の画像データに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

・　サンプルのBODY内のソース: 　以下のソースコードをスライドショーを貼り付ける場所にコピーしください。

・　別のアニメーションの組み合わせを作る: 下の「アニメーションコード」を参照し、ご希望のアニメーションの組み合わせ（一つでも可）文字列を作り、下の枠内に記述し、「この組み合わせで作る」ボタンをクリックしてください。その際、一つの時はアニメーションコードのみ、複数の時はアニメーションコードを半角文字の「&」で結合しで記述してください。
例えば、
縦横入れ替わり・縦横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　｜　; 前進でも後退でもアニメーションの方向がランダムなもの。
｜　ランダム縦横スクロール ⇒ 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　｜