[オープン][S][レスポンシブ]開始・停止ボタン付き透かしスライドショーの構造SHD_nsl_1b_su

・　このページの説明: 　レスポンシブデザイン対応でシンプルなJavascriptスライドショーの基本構造を解説しています。一つボタン型でアニメーションは「透かし」です。画像の左下隅にスライドショーボタンがあり、クリックで停止・開始のトグル動作するので、ダブルクリックで次の画像に進む事になります。; 　画像をバナー（クリックすると設定したホームページが別タブに開く）にする時は、見本を参考にしてonclick属性またはondblclick属性を書き加えてください。この時スタイル属性style="cursor:pointer;"も書き加えるとカーソルが手の形になります。; 　透かしアニメーションの構造には色々なタイプがあり、二枚の画像を使い一方をフェードアウトし他方をフェードインするのが一般的ですが、レイヤーの上下を利用して下の画像は変更せずに上の画像だけをフェードさせて表現する事もできます。このページでは、スライドショー画像を同じ位置に表示し、スタイルシートで初期値z-index:1;とopacity:0;で透明にしています。スクリプトで最初の画像だけをz-index:2;とopacity:1;で不透明化してスライドショーを開始します。; 　掲載しているソースコードは、スライドショーだけを表示するホームページ全体のものです。ソースコードを「メモ帳」などのテキストエディタにコピーし、データ部分を自分のURLに書き換えて、文字コードを「UTF-8」に設定し、拡張子を「html」にして「名前を付けて保存」してください。; 　他のホームページに貼り付けて使うときは、掲載しているソースコードのスタイルシート部分を貼り付けるページのhead内に、スライドショーとスクリプトをbody内にコピーしてください。; 　このページは文字コード「UTF-8」で書いています。ソースコードの一部を他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　見本のスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

⇔

</div>

</div>

"use strict";							//--strict（厳格）モード」で実行。
((o) => {							//--スライドショー要素oを引数にした無名関数。

//--const変数宣言。
	const							//--実行中に書き換えられない変数設定。
	sokudo = 5000,						//--スライドショー速度（ミリ秒単位）。
	ani_sokudo = 800,					//--スタイルシートのアニメーション速度を書く。
	syasin = o.querySelectorAll("img"),			//--本体内のIMG要素のリスト。
	bu = o.querySelector(".but_sl"),			//--スライドショーボタン。
	goukei = syasin.length,					//--画像の枚数合計。
	tugi = () => {						//--次の画像を表示する関数。
		if (!hata_m) {					//--もしhata_mがfalseならば。
			clearTimeout(tid);			//--タイマーIDを初期化してタイマーを停止。
			hata_m = true;				//--hata_mをtrueに変更。
			stack = idx;				//--現在のインデックスをスタックに入れる。
			idx ++;					//--インデックスを一つ進める。
			idx %= goukei;				//--インデックスが合計を上回らないための処理。
			syasin[idx].style.zIndex = 2;		//--新しい画像のスタイルz-indexを前面に。
			syasin[stack].style.zIndex = 1;		//--古い画像のスタイルz-indexを後面に。
			syasin[idx].style.opacity = 1;		//--新しい画像のスタイルopacityを不透明に。
			syasin[stack].style.opacity = 0;	//--古い画像のスタイルopacityを透明に。
			if (hata_sl) {				//--もしhata_slがtrueならば。
				setTimeout(() => {		//--タイマー設定。
					go();			//--関数tugiを呼び出す。
					hata_m = false;		//--hata_mをfalseに変更。
				}, ani_sokudo);			//--変数sokudoミリ秒後に。
			}
		}
	},
	go = () => {						//--タイマー関数。
		clearTimeout(tid);				//--タイマーIDを初期化してタイマーを停止。
		tid = setTimeout(tugi, sokudo);			//--スライドショー速度後に関数tugiを呼び出す。
	};

//--let変数宣言。
	let							//--実行中に書き換えられる変数設定。
	idx = 0,						//--インデックスを宣言し初期値0を代入。
	stack,							//--スタックを宣言。
	hata_m = false,						//--アニメーションが動作中はtrue、停止中はfalse。
	hata_sl = true,						//--スライドショーが動作中はtrue、停止中はfalse。
	tid;							//--タイマーID。

//--スライドショートグルボタンの設定。
	if(bu){							//--もしスライドショーボタンが存在すれば。
		if (hata_sl) {					//--もしhata_slがtrueならば。
			bu.innerHTML = "pause";			//--スライドショーボタンに"pause"と表示する。
		} else {					//--さもなければ。
			bu.innerHTML = "play";			//--スライドショーボタンに"play"と表示する。
		}
		bu.onclick = () => {				//--以下はクリックで実行する関数。
			if (hata_sl) {				//--もしフラッグがtrueならば。
				clearTimeout(tid);		//--タイマーIDを初期化してスライドショーを停止。
				hata_sl = false;			//--hata_slをfalseに変更する。
				bu.innerHTML = "play";		//--スライドショーボタンに"play"と表示する。
			} else {				//--さもなければ。
				hata_sl = true;			//--hata_slをtrueに変更する。
				bu.innerHTML = "pause";		//--スライドショーボタンに"pause"と表示する。
				tugi();				//--かんすうtugiに進む。
			}
		}
	};

//--初期設定。
	syasin[idx].style.zIndex = 2;				//--最初の画像のスタイルz-indexを前面に。
	syasin[idx].style.opacity = 1;				//--最初の画像のスタイルopacityを不透明に。
	if (hata_sl) {go()}					//--hata_mがtrueならば動作状態で開始する。

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

・　透かしスライドショー id="my_sl11"

[オープン][S][レスポンシブ]開始・停止ボタン付き透かしスライドショーの構造SHD_nsl_1b_su_os