초간단 이미지 슬라이드 만들기 II (Javascript)


오늘은 Javascript 중에서 setInterval을 이용해서 위 사진과 같은 초간단 이미지 슬라이드를 만들어 보았습니다.

3초정도 기다리면 다음 이미지로 넘어가는 모양입니다.
이전것은 setTimeout를 사용한 것이었죠.




code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="1.jpg" id=mainImage alt="YsjImage" style="width:120px;height:90px;">

<script>
var myImage=document.getElementById("mainImage");
var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg"];
var imageIndex=0;

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

즐거운 하루 되세요



자바스크립트/기타등등 다른 글

댓글 1

*

*