반응형
이미지 버튼 눌러 넘기기
<head>
이미지들의 주소에 배열을 넣고, 번호를 정해줄 cnt 변수를 설정한다.
함수 안에 이미지를 불러오는 경로를 설정하고, cnt 를 이용해 배열의 방 번호를 부여해준다.
cnt%3 -> 이미지가 3개 배열이 [3]이므로, 모드(%) 를 이용해 0,1,2만 반복되도록 제어한다.
cnt 를 증가하게 함으로써 다음 방으로 넘어가게 해준다.
</head>
<body>
버튼을 누를때마다 함수 a()를 호출한다.
</body>
<script type = "text/javascript">
let arr = ["star.png", "naver.gif", "daum.png"]; //배열에 경로에 있는 이미지들의 배열을 넣음
let cnt = 0; //next 누를때마다 0,1,2 ...번방에 갈 카운트 넣어줌
function a(){
document.img1.src = "../img/"+arr[cnt%3];
// documnet.이미지객체이름. cnt%3 -> 0,1,2만 반복되도록.
// 존재하지 않는 방으로 넘어가지 않게 모드로 제어해줌
cnt++;
}
//페이지 로드 되자마자
window.onload= function(){
a();
}
</script>
<body>
<img name = "img1" src = "../img/daum.png"> <!-- 이미지 태그 이름 img2 -->
<input type = "button" value = "next" onclick="a()">
</body>반응형
