html 이미지 슬라이드(자바스크립트)

* html 이미지 슬라이드 (자바스크립트 사용)

- jsp 파일 내에서 아래 코드로 진행.

- imageArray에 들어간 이미지 순서대로 진행.

- setInterval을 통해 이미지가 3초마다 변경되도록 설정.

<img src="/blog/resource/img/m1.jpg" id=mainImage alt="slide"/>

<script>
	var myImage = document.getElementById("mainImage");
	var imageArray = [ "/blog/resource/img/m1.jpg",
			"/blog/resource/img/m2.jpg", "/blog/resource/img/m3.jpg" ];
	var imageIndex = 0;

	function changeImage() {
		myImage.setAttribute("src", imageArray[imageIndex]);
		imageIndex++;
		if (imageIndex >= imageArray.length) {
			imageIndex = 0;
		}
	}
	setInterval(changeImage, 3000);
</script>