본문 바로가기

자바스크립트/기타등등

초간단 이미지 슬라이드 만들기 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>

즐거운 하루 되세요

 

반응형