画像切り替え carousel カルーセル

/**
 * 画像切り替え
 *
 * @author ao-system, Inc.
 * @date 2025-03-14
 */

(() => {
	'use strict';
	class SwitchImage {
		//constant
		#switchPanelImage		= document.getElementById('switchPanelStage');
		#layer0					= document.createElement('div');
		#layer1					= document.createElement('div');
		#layerBall				= document.createElement('div');
		#markBallOn				= 'data:image/svg+xml;charset=utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" version="1.1" viewBox="0 0 20 20"><circle  fill="#aaa" cx="10" cy="10" r="10"/></svg>');
		#markBallOff			= 'data:image/svg+xml;charset=utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" version="1.1" viewBox="0 0 20 20"><circle  fill="#ccc" cx="10" cy="10" r="10"/></svg>');
		#imageChangeInterval	= 4000;	//画像と画像の時間間隔
		#slideWidth				= 0;	//切り替わるスライド幅
		#slideTime				= 600;	//スライド時間cssの0.5sよりちょっと長め
		#panelWidthMax			= 1920;
		#panelHeightRatio		= () => {return (window.matchMedia('(width < 670px)').matches) ? (780 / 750) : (1257 / 1920)};
		#buttonSizeRatio		= () => {return (window.matchMedia('(width < 670px)').matches) ? 2.4 : 1.0};
		//variable
		#loopTimeoutId			= null;
		#isBusy					= false;
		#pausePlayFlag			= true;		//falseで停止
		#focusFlag				= true;		//フォーカスが外れている時は動作させないため
		#imagePointer			= 0;		//_switchImageのポインタ
		#slideDirection			= 1;		//1|-1	正方向,逆方向
		#swipeShreshold			= 50;		//スワイプ判定幅
		#swipeStartX			= 0;		//スワイプ開始位置
		#swipeStartY			= 0;		//スワイプ開始位置
		#isSwiping				= false;	//スワイプ中
		#htmls					= [];		//htmlデータ
		//
		constructor(htmls) {
			this.#htmls = htmls;
			this.#init();
		}
		async #init() {
			this.#switchPanelImage.appendChild(this.#layer0);
			this.#switchPanelImage.appendChild(this.#layer1);
			this.#switchPanelImage.appendChild(this.#layerBall);
			this.#layer0.innerHTML = this.#htmls[0];
			this.#layer1.innerHTML = this.#htmls[0];
			this.#layer1.style.opacity = 1;
			this.#initBall();
			this.#initSwipe();
			this.#ballOn();
			this.#autoSlide();
			this.#setListener();
		}
		#setListener() {
			let lastWidth = 0;
		}
		#initBall() {
			this.#htmls.map((x,index) => {
				const span = document.createElement('span');
				span.addEventListener('click',() => {
					if (this.#isBusy) {
						return;
					}
					this.#slideAction(index);
				});
				span.innerHTML = '<img src="' + this.#markBallOff + '"><img src="' + this.#markBallOn + '">';
				this.#layerBall.appendChild(span);
			});
		}
		#initSwipe() {
			this.#layer1.addEventListener('click', (e) => { e.preventDefault();});
			this.#layer1.addEventListener('mousedown', (e) => { this.#swipeStart(e.clientX,e.clientY); });
			this.#layer1.addEventListener('mouseup', (e) => { this.#swipeEnd(e.target, e.clientX, e.clientY); });
			this.#layer1.addEventListener('touchstart', (e) => { this.#swipeStart(e.touches[0].clientX, e.touches[0].clientY); });
			this.#layer1.addEventListener('touchend', (e) => { this.#swipeEnd(e.target, e.changedTouches[0].clientX, e.changedTouches[0].clientY); });
		}
		#swipeStart(positionX,positionY) {
			if (this.#isBusy) {
				return;
			}
			this.#swipeStartX = positionX;
			this.#swipeStartY = positionY;
			this.#layer1.style.cursor = 'grabbing';
			this.#isSwiping = true;
		}
		#swipeEnd(targetElm,positionX,positionY) {
			if (this.#isSwiping == false) {
				return;
			}
			if (this.#swipeStartX - positionX > this.#swipeShreshold) {
				this.#slideAction(this.#withinRange(this.#imagePointer + 1));
			} else if (this.#swipeStartX - positionX < -this.#swipeShreshold) {
				this.#slideDirection = -1;
				this.#slideAction(this.#withinRange(this.#imagePointer - 1));
			} else if (this.#swipeStartY - positionY > this.#swipeShreshold) {
				//何もしない
			} else if (this.#swipeStartY - positionY < -this.#swipeShreshold) {
				//何もしない
			} else {
				let attrLink = null;
				let attrTarget = null;
				let targetElm2 = targetElm;
				for (let i = 0; i < 9; i++) {	//画像からこの回数の親を調べる
					targetElm2 = targetElm2.parentNode;
					if (targetElm2 == this.#layer1) {
						break;	//リンクが無かった場合
					}
					attrLink = targetElm2.getAttribute('href');
					if (attrLink) {
						attrTarget = targetElm2.getAttribute('target');
						break;	//調査完了
					}
				}
				if (attrLink) {
					if (attrTarget) {
						window.open(attrLink, attrTarget);
					} else {
						window.location.href = attrLink;
					}
					return;
				}
			}
			this.#layer1.style.cursor = '';
			this.#isSwiping = false;
		}
		#slideForward() {
			if (this.#isBusy) {
				return;
			}
			this.#isBusy = true;
			this.#ballOn();
			this.#layer1.innerHTML = this.#htmls[this.#imagePointer];
			this.#layer1.animate(
				[
					{opacity: 0, transform: `translateX(${this.#slideWidth * this.#slideDirection}px)`},
					{opacity: 1, transform: 'translateX(0px)'},
				],
				{delay: 0, duration: this.#slideTime, fill: 'forwards', easing: 'ease-out'}
			).finished.then(() => {
				this.#layer0.innerHTML = this.#htmls[this.#imagePointer];	//背景を前景と同じにする
				//this.#setButtonSize();
				this.#slideDirection = 1;
				this.#isBusy = false;
			});
		}
		#autoSlide() {
			this.#loopTimeoutId = setTimeout(() => {
				if (this.#pausePlayFlag && this.#focusFlag) {
					this.#slideAction();
				} else {
					this.#autoSlide();
				}
			}, this.#imageChangeInterval - this.#slideTime);
		}
		#slideAction(num = this.#imagePointer + 1) {
			clearTimeout(this.#loopTimeoutId);
			this.#imagePointer = this.#withinRange(num);
			this.#slideForward();
			this.#autoSlide();
		}
		#ballOn() {
			const spans = this.#layerBall.querySelectorAll('span');
			spans.forEach((elm) => elm.classList.remove('on'));
			spans[this.#imagePointer].classList.add('on');
		}
		#withinRange(nextNumber) {
			const num = (nextNumber >= 0) ? nextNumber : this.#htmls.length - 1;
			return num % this.#htmls.length;
		}
	}
	new SwitchImage(
		[
			`<div>
				<picture><img src="./image/panel01.webp" draggable="false"></picture>
			</div>`,
			`<div>
				<picture><img src="./image/panel02.webp" draggable="false"></picture>
			</div>`,
			`<div>
				<picture><img src="./image/panel03.webp" draggable="false"></picture>
			</div>`,
			`<div>
				<picture><img src="./image/panel04.webp" draggable="false"></picture>
			</div>`,
			`<div>
				<picture><img src="./image/panel05.webp" draggable="false"></picture>
			</div>`,
		],
	);
})();