n초 마다 사진 바꾸기
in Programming on JavaScript
◇ JS 실습 포스팅 시리즈 ◇
- 입력 데이터 출력 실습
- n초 마다 사진 바꾸기 - 현재 글
- 버튼위에 마우스 올려 사진 바꾸기
- 버튼위에 마우스 올려 사진 바꾸기2
- 자식창에서 부모창 정보 수정 하기
- 야식 주문 프로그램 만들기
2초마다 사진을 바꿔보자. 꽤 간단한 코드다. 시작!
HTML
놀랍게도 body에는 아래 코드가 끝이다. img 하나만 넣으면 되기 때문에.
<body>
<img id= "target" src = "dog1.jpg">
</body>
CSS
css 에서 img의 너비와 높이를 정해준다.
<style>
img{
width: 800px;
height : 600px;
}
</style>
Javascript
여기 부분이 살짝 어려울 수 있다. 그러나 알고보면 쉽다.
1. js에서 css 접근하기.
- img element를 객체로 가져온다.
- 객체.setAttribute(“src”,”img 이름”) 으로 js에서 그림을 넣을 수 있다.
var pic = document.getElementById('target')
pic.setAttribute("src",("dog"+(i%4+1)+".jpg"))
2. setInterval 함수를 이용해 n초마다 반복하게 한다.
setInterval(function(){
//반복할 코드를 넣어주면 된다.
},2000);}
- setInterval 함수의 첫번째 인자는 함수이고, 두번째 인자는 milliseconds이다. 첫번째 인자로 넣어주는 함수는 반복할 코드로 구성되어있다.
- 다음과 같은 코드를 반복할 것이다.
- 내가 사용할 사진명은 dog1.jpg , dog2.jpg , dog3.jpg , dog4.jpg 이기 때문에 아래와같이 코딩해준다. 반복할 사진이 네개기 때문에 모듈러를 이용해서 1~4가 계속 반복되게 한다.
i=1;
var pic = document.getElementById('target')
pic.setAttribute("src",("dog"+(i%4+1)+".jpg"))
i++;
위 코드를 합치면
window.onload = function(){
i=1;
setInterval(function(){
var pic = document.getElementById('target')
pic.setAttribute("src",("dog"+(i%4+1)+".jpg"))
i++;
},2000);
}
쨘,,
아 그리고
만약 이름이 상당히 다른 사진을 이용하고 싶다면? 어레이에 넣어서 인덱스로 사진명을 가져오면 된다.
var ary = ["hello.jpg","dog1.jpg","cat.png","pizza.png"];
window.onload = function(){
i=1;
setInterval(function(){
var pic = document.getElementById('target')
pic.setAttribute("src",ary[i%4+1])
i++;},2000);
}
요로케,,
어쨋든, 전체 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
div.wrapper {
width : 800px;
height : 600px;
margin : 0 auto;
text-align: center;
}
img{
width: 800px;
height : 600px;
}
</style>
<script>
window.onload = function(){
i=1;
setInterval(function(){
var pic = document.getElementById('target');
pic.setAttribute("src",("dog"+(i%4+1)+".jpg"));
i++;
},2000);
}
</script>
</head>
<body>
<img id= "target" src = "dog1.jpg">
</body>
</html>
