<div class="img__w">
	<img id="image-preview" src="" alt="">
</div>

img {
	max-width: 100%;
}
.img__w {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

let splashImageList = [
	"https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363fc78ba105e4f0906e_Splash_JC120.png",
	"https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363f7fc70b112e082c94_Splash_Classic.png",
	"https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363f26359257a2a022dc_Splash_6505.png",
	"https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363e05580955df45bfe7_Slash_Demon.png"
];

let idx = 0;

// get image name (sort of)
function setAlt(image) {
	return image.split("_").pop();
}

// change image and assign its `alt`
const myFunction = () => {
	const currentImg = splashImageList[idx];
	let imgElement = document.querySelector("#image-preview");
	imgElement.src = currentImg;
	imgElement.alt = setAlt(currentImg);
	idx += 1;
	if (idx >= splashImageList.length) {
		idx = 0;
		imgElement.src = currentImg;
		imgElement.alt = setAlt(currentImg);
	}
};

setInterval(myFunction, 3000);