[オープン][F][バナー][レスポンシブ][アクティブ][シャッフル][ガイド][divサムネイル][DrFlMw縦横連動][実行時ランダム][4画像][多種類][部品削除可][表示方法変更ボタン][罫線設定ボタン][mat&linkボタン][レスポンシブボタン][viewボタン][セレクト][進捗表示][キー操作][縦横一覧][サムネイル連動]スライドショーギャラリーFHD_nhgu3mbtsg_dfw_zdwp

・　説明: 　サイズやアスペクト比が異なる画像を表示する事ができるスライドショーギャラリーです。 img要素の画像ではなく、div要素の背景画像を使う事で、異なる形状の画像を一定の枠内に表示しています。バナーにするときはdiv要素ではなくa要素を使い、href属性に開くページのurlを書いてください。スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素（a要素）で、表示する画像を背景に設定してください。; 　背景画像の表示方法は、[表示方法変更ボタン]でcontainまたはcoverに設定変更できます。 containにすれば形の違う画像を画面内に収めて表示でき、coverでは画面いっぱいに表示できます。; 　レスポンシブデザインへの対応は「アスペクト比維持型」でも「高さ維持型」でも[レスポンシブボタン]で変更できます。; 　[部品削除可]のスライドショーですから、メイン画像以外の不要な部品はHTMLの該当箇所を削除して消す事ができます。ただし、「カスタマイズ」にその部品に関する設定がある場合に設定個所も一緒に削除すると動かなくなるケースがあります。削除するのはHTML部分だけにしてください。; 　操作ボタンはスライドショー右上にあり、モバイルではタップ、パソコンではマウスを重ねると可視化されます。 [表示方法変更ボタン][罫線設定ボタン][mat&linkボタン][レスポンシブボタン][viewボタン]や[アクティブ][シャッフル][実行時ランダム]機能などの説明はコンテンツの題名のブラケット（角括弧[]）についてをご参照ください。; 　ガイドボタンはクラス名guideのdiv要素を作っておけばスクリプトが自動的に設置します。; 　スライドショーの切り替えアニメーションはです。多種類のアニメーション名が・で区切られて記述してある場合は、切り替えるたびにアニメーションがランダムに選択されます。スライドショーの機能はこのままでアニメーションの組み合わせだけを変更したい場合は、このページ最下部「別のアニメーションの組み合わせを作る」をご参照ください。当サイトで提供している全アニメーションから複数の組み合わせを選択し、その見本とソースコードを表示できます。; 　サムネイルもimg要素ではなくdiv要素の背景として表示します。クラス名gal_baseのdiv要素の中の、クラス名thumbのdiv要素の背景にサムネイル用の画像を設定し、スライドショーと同数を同じ順番で書いてください。サムネイル一覧は[mat&linkボタン]で[縦横一覧]と[サムネイル連動]が切り替えられます。; 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。このページでは生成AIで作った画像を使っています。

サムネイル一覧の形状変更ボタン
[link]		[mat]
	⇔

レスポンシブデザインへの対応方法
アスペクト比維持型
	⇔
高さ維持型
	⇔

・　見本

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

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

/** 表示部分。 **/
/** このページは[レスポンシブ対応方法変更可]のためheight:～;やpadding-top:～%;は書かない。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .base{position:relative;top:0;left:0;}

/** 個々のデータ。background-size:contain;やobject-fit:contain;はスクリプトで設定。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-color:#eee;border:20px solid #eee;}

/** ボタン。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .mae,.FHD_nhgu3mbtsg_dfw_zdwp_os .tugi{width:26px;height:26px;border-radius:50%;cursor:pointer;border:0;background-color:#fff;}
.FHD_nhgu3mbtsg_dfw_zdwp_os .bs_bu{width:55px;height:24px;cursor:pointer;border:0;background-color:#fff;}
.FHD_nhgu3mbtsg_dfw_zdwp_os .resp{width:50px;height:24px;cursor:pointer;border:0;background-color:#fff;}
.FHD_nhgu3mbtsg_dfw_zdwp_os .but_sl,.FHD_nhgu3mbtsg_dfw_zdwp_os .bo_bu{width:45px;height:24px;cursor:pointer;border:0;background-color:#fff;}
.FHD_nhgu3mbtsg_dfw_zdwp_os .view{width:40px;height:24px;cursor:pointer;border:0;background-color:#fff;}
.FHD_nhgu3mbtsg_dfw_zdwp_os .mat_link{width:35px;height:24px;cursor:pointer;border:0;background-color:#fff;}

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

/** ボタンの外枠。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .con{position:absolute;top:-50px;right:10px;z-index:20;padding:6px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.6);border-radius:19px;transition:0.5s;opacity:0;}
.FHD_nhgu3mbtsg_dfw_zdwp_os:hover .con{top:10px;opacity:1;}

/** セレクトボックス。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .ke_che{width:40px;height:24px;box-sizing:border-box;}
.FHD_nhgu3mbtsg_dfw_zdwp_os .ya_che{width:50px;height:24px;box-sizing:border-box;}

/** サムネイル一覧。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .gal{position:relative;top:0px;left:0px;width:100%;z-index:20;padding:5px;box-sizing:border-box;background-color:#000;vertical-align:bottom;}

/** サムネイル。 **/
/** 幅width:7%;は全体幅に対する比率。 **/
/** 高さpadding-top:6%;は全体幅に対する比率。 **/
/** 左右の余白はtransform:scale(0.95);で縮小して作る。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .gal .thumb{display:inline-block;width:10%;padding-top:9%;cursor:pointer;transition-duration:.5s;background:center center no-repeat;background-size:contain;transform:scale(0.95);box-sizing:border-box;border:4px solid #ccc;background-color:#ccc;}
.FHD_nhgu3mbtsg_dfw_zdwp_os .gal .thumb:hover{border:4px solid #fff;}

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

/** プログレスバー。 **/
.FHD_nhgu3mbtsg_dfw_zdwp_os .progress{position:relative;top:0;left:0;z-index:20;width:100%;height:3px;background:#000;border-radius:2px;overflow: hidden;}
.progress .progress-bar{height:100%;background:#999;width:0%;transition:none;}

</style>

</div>

</div>

<div class="con">
<button class="mae" title="前の画像"><</button>
<button class="but_sl" title="スライドショーの開始と停止">pause</button>
<button class="bs_bu" title="表示方法の変更">cover</button>
<button class="bo_bu" title="罫線（ボーダー）の設定">unset</button>
<button class="mat_link" title="サムネイル一覧の形状の変更">matrix</button>
<button class="resp" title="レスポンシブ対応方法の変更">height</button>
<button class="view" title="画像を別タブに表示">view</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>
<button class="tugi" title="次の画像">></button>
</div>

</div>

!function(n){var

//--------- カスタマイズ↓ ----------

ds = 5000,		//--スライドショー速度（ミリ秒単位）。
	da = 1500,		//--アニメーション速度（ミリ秒単位）。
	y = true,		//--自動開始はtrue、手動開始はfalse。
	fb = true,		//--アクティブを判断してスライドショーを停止/再開はtrue、しないはfalse。
	sf = true,		//--シャッフルする時はtrue、しない時はfalse。
	slr = true,		//--スライド時に進行方向をランダムにする時はtrue、しない時はfalse。
	dfw = true,		//--ドラッグ・フリック・マウスホイール操作機能ありはtrue。なしはfalse。
	key_ope = true,		//--キー操作機能を使うはtrue、使わないはfalse。
	p_bar = true,		//--プログレスバーを使うはtrue、使わないはfalse。

//--画像の表示方法の初期値。
	b_size = "contain",	//--領域内に収めるは"contain"。領域いっぱいに表示は"cover"。

//--ボタンの表記をダブルクォーテーションで囲んで書く。
	play = "play",		//--開始ボタンの表記。
	pause = "pause",	//--停止ボタンの表記。

//--サムネイル関連。
	mat_link = "link",	//--サムネイル一覧の初期形状。縦横行列型は"mat"、サムネイル連動型は"link"。
	gop = 0.4,		//--選択時のサムネイルの透明度。

//--レスポンシブ対応方法関連。ダブルクォーテーションで囲む。
	b_resp = "p_top",	//--初期値。高さ維持型は"height"、アスペクト比維持型は"p_top"。
	base_h = "480px",	//--高さ維持型の時の高さを単位を含めて書く。
	base_pt = "66.667%",	//--アスペクト比維持型の時の[高さ／幅]をパーセントで書く。

//--ガイド関連。
	guc = "#000",		//--ガイドボタンの文字色。
	gudef = "#fff",		//--ガイドボタンの初期色。
	gusel = "#fc3",		//--ガイドボタンの選択色。

//--------- カスタマイズ↑ ----------

t={SDA:function(n){n.preventDefault?n.preventDefault():n.returnValue=!1},XF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageX;u=!0},!1);n.addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageX,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},YF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageY;u=!0},!1);n.addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageY,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},XD:function(n,i,r,u){var f,e,o=!1,s=navigator.userAgent;n.addEventListener("mousedown",function(n){s.search(/iPhone/)!=-1||s.search(/iPad/)!=-1||s.search(/iPod/)!=-1||s.search(/Android/)!=-1||n.preventDefault();n.returnValue=!1;f=document.all?event.x:n.pageX;o=!0},!1);n.addEventListener("mousemove",function(s){o&&(s.preventDefault?s.preventDefault():s.returnValue=!1,e=document.all?event.x:s.pageX,e-f>u?(o=!1,r()):e-f<-u&&(o=!1,i()),(e-f>10||e-f<-10)&&n.addEventListener("click",t.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t.SDA,!1)},100),o)&&(o=!1)},!1)},YD:function(n,i,r,u){var f,e,o=!1,s=navigator.userAgent;n.addEventListener("mousedown",function(n){s.search(/iPhone/)!=-1||s.search(/iPad/)!=-1||s.search(/iPod/)!=-1||s.search(/Android/)!=-1||n.preventDefault();n.returnValue=!1;f=document.all?event.y:n.pageY;o=!0},!1);n.addEventListener("mousemove",function(s){o&&(t.SDA(s),e=document.all?event.y:s.pageY,e-f>u?(o=!1,r()):e-f<-u&&(o=!1,i()),(e-f>10||e-f<-10)&&n.addEventListener("click",t.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t.SDA,!1)},100),o)&&(o=!1)},!1)},MW:function(n,t,i){var r=function(n){var r=window.event||n,u=r.detail?r.detail*-120:r.wheelDelta;if(u<=-120?t():i(),r.preventDefault)r.preventDefault();else return!1},u=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";n.addEventListener(u,r,!1)}},f=function(n,t,i,r,u,f){var e=n[0].currentStyle||window.getComputedStyle(n[0],!1),f=r,o=n.length,s=e[i]?e[i]:"unset";t&&(t.innerHTML=f===r?u:r,t.onclick=function(){t.innerHTML===r?(t.innerHTML=u,f=s):(t.innerHTML=r,f=u);for(var e=0;e<o;e++)n[e].style[i]=f})},i={thmb_ren_go:function(n,t,i,r,u){var e,o=0,h=u[1].offsetLeft-u[0].offsetLeft,c=t.scrollLeft,f=n.offsetLeft-(t.offsetWidth-h)/2,l=h*r-t.offsetWidth+10,s;f<0?f=0:f>l&&(f=l);s=function(){o<60?(t.scrollLeft=c+(1-Math.cos(o/60*Math.PI))*(f-c)/2,o++,e=setTimeout(s,i/60)):(clearInterval(e),t.scrollLeft=f)};clearTimeout(e);s()}},r=function(n,t){n&&(t==="link"?(n.style.display="inline-block",n.style.flexWrap="unset",n.style.overflowX="auto",n.style.overflowY="hidden",n.style.whiteSpace="nowrap"):(n.style.display="flex",n.style.flexWrap="wrap",n.style.overflowX="unset",n.style.overflowY="unset",n.style.whiteSpace="unset"))},e=function(n,t,i,r,u,f){for(var o,l="."+r,a="."+u,s=n.querySelector("."+t),e=n.querySelector("."+i),h=s.querySelectorAll(l),v=e?e.querySelectorAll(a):"",c=h.length;c;)o=Math.floor(Math.random()*c--),s.appendChild(h[o]),e&&e.appendChild(v[o]),c==0?f():(h=s.querySelectorAll(l),v=e?e.querySelectorAll(a):"")},u=function(n){var s=n.querySelector(".base"),p=n.querySelector(".gal"),it=n.querySelector(".guide"),rt=n.querySelector(".but_sl"),bt=n.querySelector(".mae"),kt=n.querySelector(".tugi"),b=n.querySelector(".progress-bar"),st=n.querySelector(".view"),ht=n.querySelector(".ya_che"),ct=n.querySelector(".ke_che"),vt=n.querySelector(".bs_bu"),ut=n.querySelector(".resp"),d,yt="",h=s.querySelectorAll(".koboData"),w=p?p.querySelectorAll(".thumb"):"",a=h.length,ft,u=0,nt=0,k=0,v=0,e=1,pt=!1,wt=!1,g=!1,et=Copyright,ot=HomePage,dt=MailAddress,hi=ContentType,tt={iy:a,ya:da,ke:ds},l=document.createElement("a"),o=function(n,t){pt||(pt=!0,e=n>u?1:-1,wt&&slr&&(e=Math.floor(Math.random()*2)*2-1),nt=u,u=n,u+=tt[ot.substr(ot.indexOf("/")+3,2)],u%=tt[dt.substr(1,2)],k=nt-e,v=u+e,lt(),document.querySelector(".c_"+et).href.substr(document.querySelector(".c_"+et).href.indexOf("/")+3,2)===et.substr(1,2)&&setTimeout(function(){oi(t)},50))},lt=function(){k+=a;k%=a;v+=a;v%=a;k===u&&(k=k-e,lt());v===nt&&(v=v+e,lt());k===v&&(v=v-e*2,lt())},xx=function(n){st&&(st.onclick=function(){if(n.src)window.open(n.src);else{var t=n.currentStyle||window.getComputedStyle(n,!1);n.querySelector("img")?window.open(n.querySelector("img").src):t.backgroundImage&&window.open(t.backgroundImage.slice(4,-1).replace(/"/g,""))}})},oi=function(t){clearTimeout(ft);y&&!g&&ii();var r=Math.floor(Math.random()*(Object.keys(ani).length-2));ani[fi[r]](n,s,da,h[u],h[nt],e,t,h[k],h[v]);wt=!1;p&&(w[nt].style.opacity=1,w[u].style.opacity=gop,mat_link==="link"&&i.thmb_ren_go(w[u],p,da*.5,a,w));it&&(d[nt].style.backgroundColor=gudef,d[u].style.backgroundColor=gusel);st&&xx(h[u]);setTimeout(function(){y&&!g&&(ni(),ti());pt=!1},tt[dt.substr(2,2)]+100)},ni=function(){clearTimeout(ft);ft=setTimeout(function(){slr&&(wt=!0);o(u+1)},tt[ot.substr(ot.indexOf("/")+6,2)])},ti=function(){b&&p_bar&&(b.style.transition="none",b.style.width="0%",requestAnimationFrame(function(){requestAnimationFrame(function(){b.style.transition="width "+ds+"ms linear";b.style.width="100%"})}))},ii=function(){b&&p_bar&&(b.style.transition="none",b.style.width="0%")},ri=function(){y?(clearTimeout(ft),y=!1,ii(),rt.innerHTML=play):(y=!0,rt.innerHTML=pause,o(u+1))},ui=function(n){for(var i,t=0;t<a;t++)h[t].src?h[t].style.objectFit=n:(i=h[t].currentStyle||window.getComputedStyle(h[t],!1),h[t].querySelector("img")?h[t].querySelector("img").style.objectFit=n:i.backgroundImage&&(h[t].style.backgroundSize=n))},fi=Object.keys(ani),c,at,si,ei;if(fi.splice(0,2),n.mp=document.createElement("div"),s.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",p)for(c=0;c<a;c++)w[c].ind=c,w[c].onclick=function(){this.ind!=u&&o(this.ind)};if(it){for(c=0;c<a;c++)yt=yt+'<div style="color:'+guc+';">'+(c+1)+"<\/div>";for(it.innerHTML=yt,d=it.querySelectorAll("div"),c=0;c<a;c++)d[c].style.backgroundColor=gudef,d[c].ind=c,d[c].onclick=function(){this.ind!=u&&o(this.ind)}}bt&&(bt.onclick=function(){o(u-1,"x")});kt&&(kt.onclick=function(){o(u+1,"x")});rt&&(rt.innerHTML=y?pause:play,rt.onclick=function(){ri()});dfw&&(t.XF(s,function(){e=1;o(u+1,"x")},function(){e=-1;o(u-1,"x")},50),t.XD(s,function(){e=1;o(u+1,"x")},function(){e=-1;o(u-1,"x")},50),t.YF(s,function(){e=1;o(u+1,"y")},function(){e=-1;o(u-1,"y")},50),t.YD(s,function(){e=1;o(u+1,"y")},function(){e=-1;o(u-1,"y")},50),t.MW(s,function(){e=1;o(u+1,"y")},function(){e=-1;o(u-1,"y")}));key_ope&&document.addEventListener("keydown",function(n){n.shiftKey&&(n.key==="ArrowRight"&&(e=1,o(u+1,"x")),n.key==="ArrowLeft"&&(e=-1,o(u-1,"x")),n.key==="ArrowDown"&&(e=1,o(u+1,"y")),n.key==="ArrowUp"&&(e=-1,o(u-1,"y")),n.key==="Alt"&&ri())});vt&&(vt.innerHTML=b_size==="cover"?"contain":"cover",ui(b_size),vt.onclick=function(){this.innerHTML==="cover"?(this.innerHTML="contain",b_size="cover"):(this.innerHTML="cover",b_size="contain");ui(b_size)});ut&&b_resp?(b_resp==="p_top"?(s.style.height="",s.style.paddingTop=base_pt,ut.innerHTML="height"):(s.style.height=base_h,s.style.paddingTop="",ut.innerHTML="p_top"),ut.onclick=function(){this.innerHTML==="p_top"?(s.style.height="",s.style.paddingTop=base_pt,this.innerHTML="height",b_resp="p_top"):(s.style.height=base_h,s.style.paddingTop="",this.innerHTML="p_top",b_resp="height")}):ut||typeof b_resp=="undefined"||(b_resp==="p_top"?(s.style.height="",s.style.paddingTop=base_pt):(s.style.height=base_h,s.style.paddingTop=""));ct&&(ct.onchange=function(){ds=ct[this.selectedIndex].value-0;tt.ke=ct[this.selectedIndex].value-0});ht&&(ht.onchange=function(){da=ht[this.selectedIndex].value-0;tt.ya=ht[this.selectedIndex].value-0});p&&(w[u].style.opacity=gop);it&&(d[u].style.backgroundColor=gusel);st&&xx(h[u]);at=n.querySelector(".mat_link");at&&(at.innerHTML=mat_link==="link"?"mat":"link",at.onclick=function(){this.innerHTML==="link"?(this.innerHTML="mat",mat_link="link"):(this.innerHTML="link",mat_link="mat");r(p,mat_link);mat_link==="link"&&i.thmb_ren_go(w[u],p,da*.5,a,w)});r(p,mat_link);ei=n.querySelector(".bo_bu");f(h,ei,"border","set","unset",si);h[u].style.zIndex=2;h[u].style.opacity=1;window.addEventListener("load",function(){n.appendChild(l);l.setAttribute("href",ot);l.setAttribute("class","c_"+et);l.setAttribute("target","_blank");l.innerHTML="(C) "+et;l.style.position="absolute";l.style.bottom="3px";l.style.right="20px";l.style.zIndex=9999;l.style.textAlign="center";l.style.display="none";l.style.fontSize="10px";l.style.color="#fff";l.style.textDecoration="none";l.style.fontFamily="Meiryo UI";l.style.textShadow="1px 1px 0px #000,0px 3px 6px #000";fb&&(window.addEventListener("blur",function(){y&&!g&&(g=!0,clearTimeout(ft))},!1),window.addEventListener("focus",function(){y&&g&&(g=!1,o(u+1))},!1));y&&!g&&(ni(),ti())})};sf?e(n,"base","gal","koboData","thumb",function(){u(n)}):u(n)}(document.getElementById("

・　ソースコード: 　以下のソースコードは、スライドショーだけを表示する独立したページ全体のものです。全体をコピーし、「メモ帳」などのテキストエディタに貼り付け、文字コードを「UTF-8」に設定し、拡張子を「.html」にし、お好みの「名前を付けて保存」してください。スライドショーを他のページに張り付けて使うときは、ソース内の説明に従い、スタイル部分をHEADに、スライドショー本体部分を貼り付ける位置に、スクリプトをBODY内の最下部（スライドショー本体よりも下ならば可）にコピーしてください。; 　見本の画像は、パソコンでの編集では表示されますが、Web上にアップすると表示されないものもあります。必ずご自身の画像に書き換えてください。

・　別のアニメーションの組み合わせを作る: 下の「アニメーションコード」を参照し、ご希望のアニメーションの組み合わせ（一つでも可）文字列を作り、下の枠内に記述し、「この組み合わせで作る」ボタンをクリックしてください。その際、一つの時はアニメーションコードのみ、複数の時はアニメーションコードを半角文字の「&」で結合しで記述してください。
例えば、
縦横入れ替わり・縦横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」となります。
なお、何も書かずにクリックすると、枠内に薄い文字で表示されている組み合わせが作られます。
文字列の途中で改行したり空白や無関係の文字を入れたりすると、動かないスライドショーが作られます。
アニメーションの数に制限はありませんが、多くなると煩雑になるため３～５個程度が無難だと思います。

・　アニメーションコード（表記形式は、アニメーション名 ⇒ コード）: ★　以下はドラッグ・フリック・マウスホイールにアニメーションの縦横方向が連動します。; 縦型と横型が合体したアニメーション。
｜　縦横連動ランダムズーム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　｜　; ★　以下はドラッグ・フリック・マウスホイールにアニメーションの縦横方向が連動しません。; 方向性がないタイプで、前進でも後退でも変わらないもの。
｜　透かし ⇒ 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　｜