HTMLファイルに貼り付けるシンプルなJavascriptスライドショーの基本構造[オープン]fusion型[F][レスポンシブ]cpFuHD_n00

・　このページの説明: 　このページは文字コード「UTF-8」で書いています。ソースコードの一部を他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　既存のHTMLファイルに貼り付けて使う、レスポンシブデザイン対応でシンプルなJavascriptの[F]型スライドショーの基本構造を解説しています。 [～]の意味はコンテンツの題名のブラケット（角括弧[]）についてをご参照ください。; 　レスポンシブデザイン対応で要素内にアスペクト比が異なる画像を表示する方法は2種類あり、img要素のスタイルシートobject-fitを使う方法と、画像をdiv要素の背景にしてスタイルシートbackground-sizeをcontainに設定しimg要素の代わりに使う方法で、当サイトの[F]型スライドショーではbackground-sizeを使う方法を採用しています。このページでは両方を融合した方法、即ちbackground-size型の様にdiv要素を使用していますが、画像は背景ではなくimg要素を div要素の中に入れています。この時、img要素のスタイルシートobject-fitをcontainに設定しています。; 　切替えアニメーションは、「アニメーション無し型」・「透かし型」・「全スクロール型」・「横スクロール型」の4種類です。他のアニメーションや別のタイプのスライドショーやギャラリーは IMGスライドショーをご覧ください。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。


	⇔
	⇔

</div>

</div>

・　アニメーション無しスライドショー id="my_sl10": 　スタイルシートで背景色と同じ色のボーダーを設定して枠を作っています。使用している画像は生成AIのCopilotで作ったものです。

・　アニメーション無しスライドショーのHEAD内のソース: 　HEAD内に以下をコピーしてください。

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

</div>

</div>

・　透かしスライドショー id="my_sl11": 　使用している画像は生成AIのCopilotで作ったものです。

・　透かしスライドショーのHEAD内のソース: 　HEAD内に以下をコピーしてください。

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

</div>

</div>

・　全スクロールスライドショー(id="my_sl12"): 　スタイルシートで背景色と同じ色のボーダーを設定して枠を作っています。使用している画像は生成AIのCopilotで作ったものです。

・　全スクロールスライドショー(id="my_sl12")のHEAD内のソース: 　HEAD内に以下をコピーしてください。

・　全スクロールスライドショー(id="my_sl12")のBODY内のソース: 　スライドショーを貼り付ける場所に以下をコピーして画像データをご自身のものに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

</div>

</div>

"use strict";							//--strict（厳格）モード」で実行。

((o) => {							//--スライドショー要素oを引数にした無名関数。

const
	sokudo = 5300,						//--スライドショー速度（ミリ秒単位）。
	syasin = o.querySelectorAll(".koboData"),		//--本体内のclass="koboData"の要素のリスト。
	goukei = syasin.length,					//--画像の枚数合計。
	tugi = () => {						//--次の画像を表示する関数。
		stack = idx;					//--現在のインデックスをスタックに入れる。
		idx ++;						//--インデックスを一つ進める。
		idx %= goukei;					//--インデックスが合計を上回らないための処理。
		syasin[idx].style.left = "0%";			//--新しい画像を中央に移動。
		syasin[idx].style.zIndex = 2;			//--新しい画像を前面に。
		syasin[idx].style.opacity = 1;			//--新しい画像を不透明に。
		syasin[stack].style.left = "-105%";		//--古い画像を左に移動。
		syasin[stack].style.zIndex = 1;			//--古い画像を後面に。
		syasin[stack].style.opacity = 0;		//--古い画像を透明に。
		setTimeout(() => {
			syasin[stack].style.left = "105%";	//--古い画像を右に戻す。
		},1000);
	};
	let
	idx = 0,						//--インデックスを宣言し初期値0を代入。
	stack;							//--スタックを宣言。
	syasin[idx].style.left = "0%";				//--最初の画像を中央に移動。
	syasin[idx].style.zIndex = 2;				//--最初の画像を前面に。
	syasin[idx].style.opacity = 1;				//--最初の画像を不透明に。
	setInterval(tugi,sokudo);				//--変数sokudoごとに関数tugiを呼び出す。

})(document.getElementById("my_sl13"));				//--id="my_sl13"の要素を引数にする。

・　横スクロールスライドショー(id="my_sl13"): 　使用している画像は生成AIのCopilotで作ったものです。

・　横スクロールスライドショー(id="my_sl13")のHEAD内のソース: 　HEAD内に以下をコピーしてください。

・　横スクロールスライドショー(id="my_sl13")のBODY内のソース: 　スライドショーを貼り付ける場所に以下をコピーして画像データをご自身のものに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

HTMLファイルに貼り付けるシンプルなJavascriptスライドショーの基本構造[オープン]fusion型[F][レスポンシブ]cpFuHD_n00_os