dukDukz
2021.03.25 경일 배너 만들기 (애니메이션) 본문
배너 만들기
banner.html
<!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>Banner</title>
<link rel="stylesheet" href="./banner.css">
</head>
<body>
<!--
이미지 나오는 영역 먼저 만든다.
버튼이 나오는 영역을 만든다.
-->
<div id="banner">
<ul class="banner1">
<li class="fadein"><img src="./img/image1.png"></li>
<li class="fadein"><img src="./img/image2.png"></li>
<li class="fadein"><img src="./img/image3.png"></li>
<li class="fadein"><img src="./img/image4.png"></li>
<li class="fadein"><img src="./img/image5.png"></li>
</ul>
</div>
<div id="bannerBtn">
<ul>
<li onclick="bannerBtn(0)">버튼1</li>
<li onclick="bannerBtn(1)">버튼2</li>
<li onclick="bannerBtn(2)">버튼3</li>
<li onclick="bannerBtn(3)">버튼4</li>
<li onclick="bannerBtn(4)">버튼5</li>
</ul>
</div>
<script type="text/javascript">
var index = 0; //전역변수로 선언, 초기화하는 값 밖으로 뺌
var rolling = null; // 전역변수로 선언, 초기화 하는 작업
banner(0); //처음에 강제로 index 0 번 실행 - 5초 안기다리고도 그림 나오게
function banner(n){
//console.log(n);
bannerImg = document.querySelectorAll('.banner1 > li');
//카운팅해서 index가 5를 넘어가면 0으로 초기화함
if(index >= bannerImg.length){
index = 0;
}
//console.log(index);
//인자 값 있는 상태에서 banner() 실행될 때
// 버튼이 안눌리면 n = undefined 된 상태라서 이 if문을 쓰루하고 for문으로 넘어가는지?
if(n != undefined){
index = n; //버튼을 누르고 버튼에 해당하는 숫자를 인덱스값에 강제부여
}
//console.log("n = "+n);
for(i=0; i<bannerImg.length; i++){
if(i == index){
bannerImg.item(i).setAttribute('class', 'fadein on')
}else{
bannerImg.item(i).setAttribute('class', 'fadein')
}
//console.log(i, index);
}
index++;
//console.log(index);
}
//버튼 클릭시 실행되는 함수
function bannerBtn( n){
clearInterval(rolling); //버튼 클릭하면 setInterval이 사라짐
banner(n); // banner 함수가 실행됨
rolling = setInterval(banner,5000); // setInterval을 지우고 다시실행함
}
rolling = setInterval(banner,5000);
// css에서 3초면 js에서 5초 정도로 +2 초 정도
</script>
</body>
</html>
banner.css
*{margin: 0; padding: 0;}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
img{
display: block;
line-height: 0;
/*
line-height만 사용하면 안먹음 display: block;으로 해줘야함
공간이 남는 현상 제거
*/
}
#banner{
position:absolute; /*앞으로 떴기 때문에 아래있던 버튼들이 올라오게됨*/
top: 300px;
}
#banner>ul>li{
position: absolute;
top : 0px;
/*겹쳐서 image5가 가장 위로 올라오게됨*/
/*상위에 있는 애의 position이 어떻게 되냐에 따라 시작점이 달라짐*/
display: none; /*그 영역을 사라지게 한다.*/
}
/*
에니메이션
li.show
li.fadein
둘중하나
*/
/*li.fadein li 태그 안에서만 fadein(class 이름임)을 사용하겠다.*/
#banner>ul>li.fadein{
animation: fadein 3s;
}
#banner > ul >li.on{
display: block;
/*각각의 이미지가 나타나게 함*/
}
/* opacity --> 숫자가 작을수록 투명해집니다. */
@keyframes fadein{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#bannerBtn>ul>li{
font-size: 20px;
padding: 20px;
font-weight: bold;
float: left;
}주석 없는 html
<!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>Banner Practice</title>
<link rel="stylesheet" href="./banner_practice.css">
</head>
<body>
<div id="banner">
<ul class="banner1">
<li class="fadein"><img src="./img/image1.png" ></li>
<li class="fadein"><img src="./img/image2.png" ></li>
<li class="fadein"><img src="./img/image3.png" ></li>
<li class="fadein"><img src="./img/image4.png" ></li>
<li class="fadein"><img src="./img/image5.png" ></li>
</ul>
</div>
<div id="bannerBtn">
<ul>
<li onclick="bannerBtn(0)">버튼1</li>
<li onclick="bannerBtn(1)">버튼2</li>
<li onclick="bannerBtn(2)">버튼3</li>
<li onclick="bannerBtn(3)">버튼4</li>
<li onclick="bannerBtn(4)">버튼5</li>
</ul>
</div>
<script>
index = 0;
rolling = null;
banner(0);
function banner(n){
bannerImg = document.querySelectorAll('.banner1>li');
if(index >= bannerImg.length){
index = 0;
}
if(n != undefined){
index = n;
}
for(i=0; i<bannerImg.length; i++){
if(i == index){
bannerImg.item(i).setAttribute('class', 'fadein on');
}else{
bannerImg.item(i).setAttribute('class', 'fadein');
}
}
index++
}
function bannerBtn(n){
clearInterval(rolling);
banner(n);
rolling = setInterval(banner, 3000);
}
rolling = setInterval(banner, 3000);
</script>
</body>
</html>
+) css 추가설명
1. img를 담고 있는 li가 img 보다 커서 밑에 공간이 남는 경우
img{
display: block;
line-height: 0;
/* line-height만 사용하면 안먹음 display: block;으로 해줘야함 */
}
2. position: absolute를 #banner와 #banner>ul>li 에 둘 다 줘서 위치 조정
#banner{
position:absolute; /*앞으로 떴기 때문에 아래있던 버튼들이 올라오게됨*/
top: 300px;
}
#banner>ul>li{
position: absolute;
top : 0px;
/*겹쳐서 image5가 가장 위로 올라오게됨*/
/*상위에 있는 애의 position이 어떻게 되냐에 따라 시작점이 달라짐*/
}
3. animation: fadein 과 opacity 을 활용
/*
에니메이션
li.show
li.fadein
둘중하나
*/
#banner>ul>li.fadein{
animation: fadein 3s;
}
/* opacity --> 숫자가 작을수록 투명해집니다. */
@keyframes fadein{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
JS
1.
<script type="text/javascript">
var index = 0; //전역변수로 선언, 초기화하는 값 밖으로 뺌
function banner(){
if(index >= 5){
index = 0;
}
console.log(index);
index++;
}
setInterval(banner,1000);
// css에서 3초면 js에서 5초 정도로 +2 초 정도
</script>
2.
/*
배열 : bannerImg[0] : 0 번째 가져와라
유사배열 : querySelectorAll 는 다르게 씀
bannerImg.item(0) 배너이미지 배열의 0번째 가져와
--> 문법 자체가 이거임!!
*/
console.log(bannerImg.item(index));
'웹 개발 > JAVASCRIPT' 카테고리의 다른 글
| 2021.03.30 Javascript 기본 문법 (0) | 2021.03.30 |
|---|---|
| 2021.03.30 버튼으로 슬라이드 제어 오류_해결 + 슬라이드 정지/재생 (0) | 2021.03.30 |
| 2021.03.25 JS Document. 의 활용 (0) | 2021.03.25 |
| 2021.03.24 JS에 대해 (0) | 2021.03.24 |
| 2021.03.23 사진 슬라이드 _ js (2) | 2021.03.23 |
