<template>
	<div>
		<img class="gaung-img" :src="currentImgSrc" alt="Button Image" />
		<img class="gaung-img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt="Preloaded Image"
			style="display: none;" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentFrameIndex: 0,
				imgList: ['static/an/g/1.png', 'static/an/g/2.png', 'static/an/g/3.png', 'static/an/g/4.png',
					'static/an/g/5.png', 'static/an/g/6.png', 'static/an/g/7.png', 'static/an/g/8.png',
					'static/an/g/9.png', 'static/an/g/10.png', 'static/an/g/11.png', 'static/an/g/12.png',
					'static/an/g/13.png', 'static/an/g/14.png', 'static/an/g/15.png', 'static/an/g/16.png',
					'static/an/g/17.png', 'static/an/g/18.png', 'static/an/g/19.png', 'static/an/g/20.png',
					'static/an/g/21.png', 'static/an/g/22.png', 'static/an/g/23.png', 'static/an/g/24.png',
					'static/an/g/25.png'
				],
				delay: 20,
			};
		},
		computed: {
			currentImgSrc() {
				return this.imgList[this.currentFrameIndex];
			}
		},
		mounted() {
			this.startAnimation();
		},
		methods: {
			startAnimation() {
				const timer = setInterval(() => {
					this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
				}, this.delay);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.gaung-img {
		width: 100%;
		height: 100vh;
		object-fit: contain;
	}
</style>