dukDukz
210403 여러 슬라이더를 하나의 function으로 동작시키기 본문
전체 code
더보기
<!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>
<style>
*{margin:0; padding:0;}
ul,li{
list-style:none;
}
#banner{
display:flex;
height:300px;
flex-direction: row;
flex-wrap: nowrap;
margin-top:150px;
width:300px;
overflow:hidden;
}
#banner > li{
width:300px;
flex-shrink:0;
}
.hero{
display:none;
}
.on{
display:block !important;
}
.out{
display: none;
}
#banner > li:nth-child(1){background:red;}
#banner > li:nth-child(2){background:blue}
#banner > li:nth-child(3){background:pink}
#banner > li:nth-child(4){background:yellow;}
#banner > li:nth-child(5){background:wheat}
#banner > li:nth-child(6){background:violet}
#banner > li:nth-child(7){background:yellowgreen}
#banner > li:nth-child(8){background:turquoise}
#banner > li:nth-child(9){background:tomato}
</style>
</head>
<body>
<ul id="banner" class='gnb'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="banner" class='gnb2'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="banner" class='gnb3'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
function Banner(data){ //여기서 data 는 각각의 Object이다
let index = 0;
function slide(n){
flag = (n == undefined) ? true : false;
let ul = document.querySelectorAll(data.bannerContainer);
if (index == ul.length ) index = 0;
let beNum = (index == 0) ? (ul.length-1) : index-1;
console.log(ul);
ul.item(index).setAttribute(data.bannerItemId,data.bannerItemIdOn);
if(flag) ul.item(beNum).setAttribute(data.bannerItemId,data.bannerItemIdOut);
ul.forEach((ele,i) =>{
if(i!=index && i!=beNum){
ele.setAttribute(data.bannerItemId,data.bannerItemIdDefault);
}
});
index++;
console.log(index);
setTimeout(slide,data.bannerTimer);
}
slide(0);
}
//먼저 Object 를 각각 생성해서 특정 값을 넣어준다. 이걸 배열로 넣어준것
let json = [
{
bannerContainer:'.gnb > li',
bannerItemId:'class', // class 기준으로 하겠다는 뜻
bannerItemIdDefault:'hero',
bannerItemIdOn:'hero on',
bannerItemIdOut:'hero out',
bannerTimer:5000,
},
{
bannerContainer:'.gnb2 > li',
bannerItemId:'class',
bannerItemIdDefault:'hero',
bannerItemIdOn:'hero on',
bannerItemIdOut:'hero out',
bannerTimer:1500,
},
{
bannerContainer:'.gnb3 > li',
bannerItemId:'class',
bannerItemIdDefault:'hero',
bannerItemIdOn:'hero on',
bannerItemIdOut:'hero out',
bannerTimer:2000,
}
]
Banner(json[0]); // 이 배열 안에 넣은 Object를 인수로 보낸다. 위에 함수에서는 data라는 인수로 받게 된다.
Banner(json[1]);
Banner(json[2]);
// 한번 부를때 마다 새로운 Banner가 생긴다고 생각하면 됨
</script>
</body>
</html>
javascript 부분만
function Banner(data){ //여기서 data 는 각각의 Object이다
let index = 0;
function slide(n){
flag = (n == undefined) ? true : false;
let ul = document.querySelectorAll(data.bannerContainer);
if (index == ul.length ) index = 0;
let beNum = (index == 0) ? (ul.length-1) : index-1;
console.log(ul);
ul.item(index).setAttribute(data.bannerItemId,data.bannerItemIdOn);
if(flag) ul.item(beNum).setAttribute(data.bannerItemId,data.bannerItemIdOut);
ul.forEach((ele,i) =>{
if(i!=index && i!=beNum){
ele.setAttribute(data.bannerItemId,data.bannerItemIdDefault);
}
});
index++;
console.log(index);
setTimeout(slide,data.bannerTimer);
}
slide(0);
}
//먼저 Object 를 각각 생성해서 특정 값을 넣어준다. 이걸 배열로 넣어준것
let json = [
{
bannerContainer:'.gnb > li',
bannerItemId:'class', // class 기준으로 하겠다는 뜻
bannerItemIdDefault:'hero',
bannerItemIdOn:'hero on',
bannerItemIdOut:'hero out',
bannerTimer:5000,
},
{
bannerContainer:'.gnb2 > li',
bannerItemId:'class',
bannerItemIdDefault:'hero',
bannerItemIdOn:'hero on',
bannerItemIdOut:'hero out',
bannerTimer:1500,
},
{
bannerContainer:'.gnb3 > li',
bannerItemId:'class',
bannerItemIdDefault:'hero',
bannerItemIdOn:'hero on',
bannerItemIdOut:'hero out',
bannerTimer:2000,
}
]
Banner(json[0]); // 이 배열 안에 넣은 Object를 인수로 보낸다. 위에 함수에서는 data라는 인수로 받게 된다.
Banner(json[1]);
Banner(json[2]);
// 한번 부를때 마다 새로운 Banner가 생긴다고 생각하면 됨
1. 먼저 슬라이더 만의 json 이라는 변수를 생성해서 이 안에 Object 3개를 넣는다.
이 각각의 Object 안에는 한줄 한줄의 속성들이 있는 것이다.
1) 객체란
더보기
var 변수 { };
이렇게 대괄호를 열어서 안에다 써주면 그 값들이 객체가 되는것이다.
객체에서 string값을 넣어줄때는 객체이름 : "string"; 으로 생성한다
어떤 값을 추가로 넣어줄 때는 객체이름.setAttribute = "어떠한 값";
이렇게 = 으로 넣어준다.
생성할때는 :
추가할때는 =
2) 객체를 선언하는 방법 2가지
더보기
obj = new Object();
obj.name = '자동차';
obj.carName = '아반떼';
obj2 = {
bannerContainer:'.gnb > li',
bannerItemId:'class',
bannerItemIdDefault:'hero',
bannerItemIdOn:'hero on',
bannerItemIdOut:'hero out',
bannerTimer:1000,
}이 두가지 방법 중, 나는 두번째를 선택한것이다.
2. 그 다음에 Banner를 호출할때 마다 json[숫자] 를 넣어서 실행시켜준다.
이때 실행은 각각 되며 Banner 3개가 독립적으로 돌아가는 것이다.
3. Banner 가 호출되면 json[숫자] = data 로 받아서 함수를 실행시킨다.
4. Banner 안에서
let index = 0;
slider(0);
을 먼저 실행시킨다.
5. 처음에 slider(0); 이므로 n = 0 을 넣어서 실행된다.
이걸 쓰는 이유는 맨 처음에 out 이 보이는 것을 방지하기 위해서이다.
flag = (n == undefined) ? true : false;
if(flag) ul.item(beNum).setAttribute(data.bannerItemId,data.bannerItemIdOut);이걸 거칠때 처음에는 n= 0이므로 undefined 가 아니다. 그래서 flag = flase가 된다.
if (flag = false) 이므로 뒤에 있는 문장은 처음에 함수가 돌때 실행되지 않고 through 된다.
6. 함수가 한번 돌고 다음에 돌때 부터는
function slide(n){
flag = (n == undefined) ? true : false;
...
if(flag) ul.item(beNum).setAttribute(data.bannerItemId,data.bannerItemIdOut);
...
index++;
setTimeout(slide,data.bannerTimer);
}setTimeout(slide,data.bannerTimer); 로 slider함수가 돌기 때문에 n 이 undefined로 변경이 되고 flag = true;가 된다.
그래서 if (flag = ture) 가 되어서 뒤에 있는 문장이 실행이 된다.
'웹 개발 > JAVASCRIPT' 카테고리의 다른 글
| 21.04.15 배열. filter, find, map, reduce (0) | 2021.04.15 |
|---|---|
| 21.04.14 배열과 이중배열 (0) | 2021.04.14 |
| 21.04.12 ① display : flex; ② 단위 vw ③ 레이어 팝업 ④모바일ver (0) | 2021.04.13 |
| 21.04.12 forEach / callback 함수 / 익명함수 (0) | 2021.04.12 |
| 2021.03.31 JS Object 객체란? (0) | 2021.03.31 |
'웹 개발/JAVASCRIPT' Related Articles
more
