하기의 예시 같이 이미지들을 슬라이드 쇼 처럼 다음을 누르면 넘어가는 기능을 구현 해보고자 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
img {
width : 200px;
height : 200px;
}
</style>
<script>
//배열을 전역으로 하나 만들었음
let arr = ["1.png","2.png","3.jpg","네이버.gif","sun.png"];
//cnt가 증가 할때마다 다음으로 가게 하려고 cnt 변수 선언
let cnt = 0;
function a() {
//document. 밑에있는 이미지이름이 img1 . 경로
document.img1.src= "../img/" + arr[cnt%5];
//근데 계속 반복해 주려고 arr[cnt%5] 라고 해줬다.
//다음 누를때마다 1씩 증가
cnt++;
}
</script>
</head>
<body>
<img name = "img1" src = "../img/네이버.gif">
<input type = "button" value = "next" onclick = "a()">
</body>
</html>
그렇다면 쿠팡 같은 사이트 처럼 메인화면에 이미지들이 1~2초 간격으로 변경 되는 기능은 어떻게 해야 하는 걸까?
바로! setTImeout을 사용해 주는 것이다.
▶ setTimeout(코드를 담고 있는 함수, 지연시간) :
어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행하게 해주는 내장함수이다.
첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
img {
width : 200px;
height : 200px;
}
</style>
<script>
//배열을 전역으로 하나 만들었음
let arr = ["1.png","2.png","3.jpg","네이버.gif","sun.png"];
//cnt가 증가 할 때 마다 다음으로 가게 하려고 cnt 변수 선언
let cnt = 0;
function a() {
//이미지의 위치(경로)를 알려주었다.
document.img1.src= "../img/" + arr[cnt%5];
//근데 계속 반복해 주려고 arr[cnt%5] 라고 해줬다.
cnt++; //카운트 증가
setTimeout(a,1000);
//setTimeout(함수명,딜레이) 마이크로세컨즈 딜레이 시간이 지난 후 함수를 호출 해준다.
//setTimeout은 반복 기능이 없다. 그래서 a함수 밖에 선언해주면 한번만 하고 끝난다.
//근데 지금 a 함수 안에 있으니까 여러번 호출 되서 그렇게 바뀌는 것 처럼 보이는 것임
}
window.onload = function(){
a();
//웹페이지를 켜자마자 실행 되야 함으로
//onload 이벤트핸들러 실행 해주고 그 이벤트 핸들러는 함수를 받는데
//그 함수가 a() 인 것이다.
}
</script>
</head>
<body>
<img name = "img1" src = "../img/네이버.gif">
</body>
</html>
'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - DOM 요소 속성 (0) | 2023.03.26 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - DOM (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 회원가입 (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 이벤트(event) (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 페이지 이동 (0) | 2023.03.25 |
