<style>
div.switchImage {
	margin-inline: 10px;
	> div {
		max-width: 1340px;
		margin-inline: auto;
		border-radius: 30px;
		overflow: hidden;
		> div#switchImage {
			display: grid;
			> img {
				grid-area: 1/1/2/2;
				width: 100%;
				height: 600px;
				object-fit: cover;
			}
		}
	}
}
</style>
<div class="switchImage">
	<div>
		<div id="switchImage">
			<img src="./image/panel02.webp">
			<img src="./image/panel01.webp">
		</div>
	</div>
</div>
		

(() => {
	class SwitchImageZoom {
		#images = [
			'./image/panel01.webp',
			'./image/panel02.webp',
			'./image/panel03.webp',
			'./image/panel04.webp',
			'./image/panel05.webp',
		];
		#stages			= document.querySelectorAll('#switchImage > img');
		#interval		= 5000;
		#fadeDuration	= 800;
		#layer			= 0;
		#imageIndex		= 2;
		#moveEnable		= true;
		#busy			= false;
		constructor() {
			this.#move();
		}
		#move() {
			if (this.#moveEnable == false) {
				return;
			}
			this.#busy = true;
			if (this.#layer == 0) {
				this.#stages[1].animate(
					[
						{opacity: 1},
						{opacity: 0},
					],
					{duration: this.#fadeDuration, fill: 'forwards'}
				);
				this.#stages[0].animate(
					[
						{transform: 'scale(1.05)'},
						{transform: 'scale(1)'},
					],
					{duration: this.#interval + 1000, fill: 'forwards'}
				).finished.then(() => {
					this.#busy = false;
				});
				setTimeout(() => {
					this.#nextImageIndex();
					this.#stages[1].src = this.#images[this.#imageIndex];
				},1000);
			} else if (this.#layer == 1) {
				this.#stages[1].animate(
					[
						{opacity: 0},
						{opacity: 1},
					],
					{duration: this.#fadeDuration, fill: 'forwards'}
				);
				this.#stages[1].animate(
					[
						{transform: 'scale(1.05)'},
						{transform: 'scale(1)'},
					],
					{duration: this.#interval + 1000, fill: 'forwards'}
				).finished.then(() => {
					this.#busy = false;
				});
				setTimeout(() => {
					this.#nextImageIndex();
					this.#stages[0].src = this.#images[this.#imageIndex];
				},1000);
			}
			setTimeout(() => {
				this.#layer = this.#layer == 0 ? 1 : 0;
				this.#move();
			},this.#interval);
		}
		#nextImageIndex() {
			this.#imageIndex += 1;
			if (this.#imageIndex >= this.#images.length) {
				this.#imageIndex = 0;
			}
		}
		stop() {
			this.#moveEnable = false;
		}
		resume() {
			if (this.#busy) {
				return;
			}
			this.#moveEnable = true;
			this.#move();
		}
	}

	const switchImageZoom = new SwitchImageZoom();

	//switchImageZoom.stop();	//一時停止する場合

	//switchImageZoom.resume();	//再開する場合

})();