2020.03.25(목)
블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열째날
시간이 넘나 빠르다,,,벌써 열흘차라니,,,ㅠㅠㅠ
단시간내에 많은걸 배웠지만 내가 정확히 이해했는지 확신이 없다ㅠㅠ
오늘은 경일게임아카데미 사이트에 있는 배너처럼 계속 돌아가는걸 자바스크립트를 이용해서 만드는걸 해봤음!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="banner">
<ul class="banner1">
<li class="fadein"><img src="./images/image1.png" alt=""></li>
<li class="fadein"><img src="./images/image2.png" alt=""></li>
<li class="fadein"><img src="./images/image3.png" alt=""></li>
<li class="fadein"><img src="./images/image4.png" alt=""></li>
<li class="fadein"><img src="./images/image5.png" alt=""></li>
</ul>
</div>
<div id="bannerBtn">
<ul>
<li> <input type="button" value="버튼1" onclick="bannerBtn(0)"></li>
<li> <input type="button" value="버튼2" onclick="bannerBtn(1)"></li>
<li> <input type="button" value="버튼3" onclick="bannerBtn(2)"></li>
<li> <input type="button" value="버튼4" onclick="bannerBtn(3)"></li>
<li> <input type="button" value="버튼5" onclick="bannerBtn(4)"></li>
</ul>
</div>
<script type="text/javascript">
var index = 0;
banner();
function banner(n){
console.log(n);
bannerImg = document.querySelectorAll('.banner1>li');
if (index >= bannerImg.length){
index = 0;
}
if (n != undefined){ //인자값없이 banner() 실행될 때
index = n;
}
for(i=0; i<bannerImg.length; i++){
if (i==index){
bannerImg.item(i).setAttribute('class','show on');
} else {
bannerImg.item(i).setAttribute('class','show');
}
}
index++;
}
function bannerBtn(n){
clearInterval(rolling);
banner(n);
rolling = setInterval(banner,3000);
}
rolling = setInterval(banner,3000);
</script>
</body>
</html>
var index = 0; -> index 변수값 0부터 시작
banner(); -> banner 함수를 창 열자마자 실행
function banner(n){
console.log(n);
bannerImg = document.querySelectorAll('.banner1>li'); ->banner1의 리스트들 가져와서 배열로 변환
if (index >= bannerImg.length){
index = 0;
} -> bannerImg의 배열 0,1,2,3,4,5까지
if (n != undefined){ //인자값없이 banner() 실행될 때
index = n;
}
for(i=0; i<bannerImg.length; i++){
if (i==index){ -> ==는 비교연산자, =는 대입연산자
bannerImg.item(i).setAttribute('class','show on'); -> i와 index 같은 숫자는 class에 show on
} else {
bannerImg.item(i).setAttribute('class','show'); -> 나머지는 class에 show
}
}
index++; -> index에 1 더해주기
}
function bannerBtn(n){
clearInterval(rolling); -> rolling삭제하기
banner(n);
rolling = setInterval(banner,3000);
}
rolling = setInterval(banner,3000); -> banner라는 함수를 3초마다 시행해주기, 3000=3초
</script>
'JS' 카테고리의 다른 글
| [JS] javascript mouseover, mouse out (0) | 2021.03.29 |
|---|---|
| [JS] 자바스크립트 return문 (0) | 2021.03.29 |
| [JS] 자바스크립트 querySelectorAll 활용해서 이미지 바꾸기 (0) | 2021.03.24 |
| [JS] 자바스크립트 removeChild (0) | 2021.03.23 |
| [JS] 자바스크립트 html 요소 추가하기 (createElement, appendChild) (0) | 2021.03.23 |