dukDukz

210403 여러 슬라이더를 하나의 function으로 동작시키기 본문

웹 개발/JAVASCRIPT

210403 여러 슬라이더를 하나의 function으로 동작시키기

헤일리_HJ 2021. 4. 13. 16:26

전체 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) 가 되어서 뒤에 있는 문장이 실행이 된다.