내가 만든 페이지 기능 소개

 

function createListenerSlide(carouselElem)

상남자특 : 바로 소개할 기능 코드부터 보여줌

 

<card.css>

window.addEventListener('load', function(){
    var carousels = document.getElementsByClassName('carousel')
//캐러셀 이벤트 등록 로직

    for(var i=0; i<carousels.length; i++){
        addEventToCarousel(carousels[i]);
    }

});

function addEventToCarousel(carouselElem){
    var ulElem = carouselElem.querySelector('ul');
    var liElems = ulElem.querySelectorAll('li');

    //너비값 조정
    var liWidth = liElems[0].clientWidth; 
    var adjustedWidth = liElems.length * liWidth;
    ulElem.style.width = adjustedWidth + 'px';

    //슬라이드 버튼 이벤트 등록

    var slideButtons = carouselElem.querySelectorAll('.slide');
    for(var i = 0; i < slideButtons.length; i++){
        slideButtons[i].addEventListener('click' , createListenerSlide(carouselElem));
    }
}

function createListenerSlide(carouselElem){
    return function(event){
        var clickedButton = event.currentTarget;

        //값 가져오기
        var liElems = carouselElem.querySelectorAll('li');
        var liCount = liElems.length;
        var currentIndex = carouselElem.attributes.data.value;

        //슬라이드 버튼 체크

        if(clickedButton.className.includes('right') && currentIndex < liCount - 1) {
            currentIndex ++;
            scrollDiv(carouselElem, currentIndex);
        }else if(clickedButton.className.includes('left') && currentIndex > 0){
            currentIndex --;
            scrollDiv(carouselElem, currentIndex)
        }

        // 인디케이터 업데이트 
        updateIndicator(carouselElem, currentIndex);

        // 슬라이드 버튼 보여줌 여부 업데이트
        updateSlideButtonVisalbe(carouselElem, currentIndex ,liCount);
        // 새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트
        carouselElem.attributes.data.value = currentIndex;
    }
}


function scrollDiv(carouselElem, nextIndex) {
    var scrollable = carouselElem.querySelector('div');
    var liWidth = scrollable.clientWidth;
    var newLeft = liWidth * nextIndex;

    scrollable.scrollTo({left: newLeft, behavior: 'smooth'});
}

function updateIndicator(carouselElem, currentIndex){
    var indicators = carouselElem.querySelectorAll('footer > div');
    for(var i = 0; i < indicators.length; i++){
        if(currentIndex == i){
            indicators[i].className = 'active'
        }
        else{
            indicators[i].className = '';
        }
    }
}

function updateSlideButtonVisalbe(carouselElem, currentIndex, licount){
    var left = carouselElem.querySelector('.slide-left');
    var right = carouselElem.querySelector('.slide-right');

    if(currentIndex>0){
        left.style.display = 'block';
    }else{
        left.style.display = 'none';
    }

    if(currentIndex < licount - 1){
        right.style.display = 'block';
    }else{
        right.style.display = 'none';
    }
}

 

 

<index.html>의 carousel 부분

<div class="carousel" data=“0”>
                    <div>
                        <ul><li><img src="./images/profile.jpeg" alt="star1"></li><li><img src="./images/profile.png" alt="star2"></li>
                        
                                <div class="slide slide-left" style="display : none;">
                                    <button class="transparent-button">
                                        <img src="./icons/arrow-left.png" alt="왼쪽 버튼">
                                    </button>
                                </div>
                                <div class="slide slide-right">
                                    <button class="transparent-button">
                                        <img src="./icons/arrow-right.png" alt="오른쪽 버튼">
                                    </button>
                                </div>
                        
                    </div>

 

 

 

해당 기능은 좌측 우측 버튼을 눌렀을때 사진이 움직이는 기능이다!

 

js의 하나하나씩 설명하자면

 

window.addEventListener('load', function(){
    var carousels = document.getElementsByClassName('carousel')
//캐러셀 이벤트 등록 로직

    for(var i=0; i<carousels.length; i++){
        addEventToCarousel(carousels[i]);
    }

});

 

- window : Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다 

 

- window.addEventlistener('load', function() ~ : window가 load했을때 수신할 fuction()을 말한다.

 

- function(){
    var carousels = document.getElementsByClassName('carousel')

    for(var i=0; i<carousels.length; i++){
        addEventToCarousel(carousels[i]);
    }
}

 

carousels라는 변수를 선언하였다 이 변수는 document의classname이 carousel 인 요소를 대입한다

> html에서 carousel이 클래스명인 부분을 가져온다 

 

for(var i=0; i<carousels.length; i++){
        addEventToCarousel(carousels[i]);
    }

 

html에서 가져온 모든 carousel들 각각을 addEventToCarousel 함수를 적용한다!

 

위 동작을 아까 말했다 싶이 window가 load됬을때 한다 > 시작하면 한다 이말이란다~

 

그럼 addEventToCarousel 함수를 알아봐야겠지?? 가보자구!

 

function addEventToCarousel(carouselElem){
    var ulElem = carouselElem.querySelector('ul');
    var liElems = ulElem.querySelectorAll('li');

    //너비값 조정
    var liWidth = liElems[0].clientWidth; 
    var adjustedWidth = liElems.length * liWidth;
    ulElem.style.width = adjustedWidth + 'px';

    //슬라이드 버튼 이벤트 등록

    var slideButtons = carouselElem.querySelectorAll('.slide');
    for(var i = 0; i < slideButtons.length; i++){
        slideButtons[i].addEventListener('click' , createListenerSlide(carouselElem));
    }
}

 

function addEventToCarousel(carouselElem) : 함수 addEventToCarousel을 선언

 

var ulElem = carouselElem.querySelector('ul'); : 매개변수 즉 carousels[i] 의 ul 부분의 첫번째 요소를 반환하는 변수 ulElem을 선언

 

var liElems = ulElem.querySelectorAll('li'); : 변수 ulElem에서( carousel[i]에서 받아온 ul 부분) li태그를 가진 모든 친구들을 반환하는 변수 liElems를 선언

 

var liWidth = liElems[0].clientWidth; : carousel[0](초기값)의 너비를 변수 liWidth에 대입 

var adjustedWidth = liElems.length * liWidth; : carousel의 모든 li의 총너비를 adjustWidth에 대입한다

ulElem.style.width = adjustedWidth + 'px'; : ul의 총 크기를 carousel의 모든 li의 총너비에 대입한다

 

>> 우리는 사진을 버튼 누르면 좌측 혹은 우측으로 옮기게 하고싶은게 목적이다. 이때 사진을 html에 추가할때마다 너비가 자동으로 조절되야 하므로 해당 함수를 진행한것이다!

 

 

var slideButtons = carouselElem.querySelectorAll('.slide'); : 매개변수(carousels[i])의 class 이름이 slide인 친구들을 가져온다

 

    for(var i = 0; i < slideButtons.length; i++){

        slideButtons[i].addEventListener('click' , createListenerSlide(carouselElem));

    }

slideButton의 갯수에 따라 클릭할시 createListenerSlide(carouselElem) 을 발생하는 이벤트 리스너를 동작한다!

 

여기서 우리가 선택했던 slide 클래스명을 가진 html 의 부분을 보면!

 

<div class="slide slide-left" style="display : none;">
                                    <button class="transparent-button">
                                        <img src="./icons/arrow-left.png" alt="왼쪽 버튼">
                                    </button>
                                </div>
                                <div class="slide slide-right">
                                    <button class="transparent-button">
                                        <img src="./icons/arrow-right.png" alt="오른쪽 버튼">
                                    </button>
                                </div>

요부분인데 이곳의 button들이 눌려지면 동작하는 것이다 그럼 이제 createListenerSlide(carouselElem)을 알아봐야겠지

 

어때? 나는 보는데 이해는 가는데 막상 아무것도 안보고 하면 못하겠어 전부다 내것이 아닌가봐 하하핫 그래도 잘될거야 가보자잇!

 

function createListenerSlide(carouselElem){
    return function(event){
        var clickedButton = event.currentTarget;

        //값 가져오기
        var liElems = carouselElem.querySelectorAll('li');
        var liCount = liElems.length;
        var currentIndex = carouselElem.attributes.data.value;

        //슬라이드 버튼 체크

        if(clickedButton.className.includes('right') && currentIndex < liCount - 1) {
            currentIndex ++;
            scrollDiv(carouselElem, currentIndex);
        }else if(clickedButton.className.includes('left') && currentIndex > 0){
            currentIndex --;
            scrollDiv(carouselElem, currentIndex)
        }

        // 인디케이터 업데이트 
        updateIndicator(carouselElem, currentIndex);

        // 슬라이드 버튼 보여줌 여부 업데이트
        updateSlideButtonVisalbe(carouselElem, currentIndex ,liCount);
        // 새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트
        carouselElem.attributes.data.value = currentIndex;
    }
}

 

 

function createListenerSlide(carouselElem) : createListenerSlide 함수 선언

 

 

return function(event) : createListenerSlide 함수는 함수 fuction을 event매개변수로 리턴한다잉

var clickedButton = event.currentTarget; : 매개변수 event의 현재 위치를 clickedButton에 대입한다\

 

var liElems = carouselElem.querySelectorAll('li'); : carousel의 li 태그들을 전부 liElems에 반환한다

var liCount = liElems.length; : li의 태그 갯수를 liCount에 가져온다

var currentIndex = carouselElem.attributes.data.value; : 매개변수의 모든 데이터 값들을 currentIndex에 대입힌다

 

if(clickedButton.className.includes('right') && currentIndex < liCount - 1) { : 클래스 이름에 right가 포함된 버튼이 클릭되고 현재 인덱스가 현재 태그의 -1한 갯수보다 작다면 ( liCount변수는 배열의 갯수를 대입한 상태이므로 -1을 해준다)

            currentIndex ++;  : currentIndex값을 1 추가하고

            scrollDiv(carouselElem, currentIndex); : scrollDiv 함수를 실행한다

        }else if(clickedButton.className.includes('left') && currentIndex > 0){ : 만약 left클래스 이름이 포함된 버튼이 클릭되고 현재 인덱스의 값이 0보다 크면 (currentIndex 즉 현재 인덱스의 데이터 값이 0보다 클경우에만 left 버튼을 클릭했을시 동작하게 한다)

            currentIndex --; : currentIndex 값을 1빼고

            scrollDiv(carouselElem, currentIndex) : scrollDiv 함수를 호출한다.

        }

 

updateIndicator(carouselElem, currentIndex); : 인디케이터를 업데이트하는 함수 updateIndicator 호출

 

 updateSlideButtonVisalbe(carouselElem, currentIndex ,liCount); : 버튼의 보여줌 유무 업데이트하는 함수 updateSlideButtonVisalbe 호출

 

carouselElem.attributes.data.value = currentIndex; : 현재 current Index 값을 현재 데이터로 대입

 

 

이부분 솔직히 나도 헷갈린다 느낌이 오다가 다음날은 안오고 그러네요 ㅠㅠㅠㅠ 한번 계속보면 할수 있을겁니다~ 물론 나부터~

 

설명이 필요한 함수 하나하나씩 확인해 볼까요

 

function scrollDiv(carouselElem, nextIndex) {
    var scrollable = carouselElem.querySelector('div');
    var liWidth = scrollable.clientWidth;
    var newLeft = liWidth * nextIndex;

    scrollable.scrollTo({left: newLeft, behavior: 'smooth'});
}

 

 

위에서 사용했던 scrollDiv함수

 

function scrollDiv(carouselElem, nextIndex) : 매개변수 2개의 함수 scrollDiv 함수 선언

 var scrollable = carouselElem.querySelector('div'); : carousel의 div의 하위요소를 선택(선택자 또는 선택자 뭉치)

    var liWidth = scrollable.clientWidth; : 요소의 내부너비를 liWidth에 대입한다

    var newLeft = liWidth * nextIndex; : 요소의 내부 너비와 현재 인덱스를 곱한값을 newLeft에 넣는다

scrollable.scrollTo({left: newLeft, behavior: 'smooth'}); : scrollTo함수를 사용하여(문서를 지정된 위치로 이동하는 함수) 이동한다 behavior : 'smooth' 설정으로 부드럽게 이동되게 설정한다

 

 

function updateIndicator(carouselElem, currentIndex){
    var indicators = carouselElem.querySelectorAll('footer > div');
    for(var i = 0; i < indicators.length; i++){
        if(currentIndex == i){
            indicators[i].className = 'active'
        }
        else{
            indicators[i].className = '';
        }
    }
}

 

이 부분은 사진 아래에 파란색으로 화면이 나올때마다 순서에 맞게 파란색으로 표시되는 것으로 이부분의 html은

 

<footer>
                        <div class="active">
                        </div>
                        <div></div>
                    </footer>

function updateIndicator(carouselElem, currentIndex) : 매개변수 2개인 updateIndicator 함수 선언

 

 

 var indicators = carouselElem.querySelectorAll('footer > div'); : footer 아래에 있는 모든 div 선택

    for(var i = 0; i < indicators.length; i++){ : 인디케이터의 갯수가 i보다 같기 전까지 for문 돌리고 돌리고~

        if(currentIndex == i){ : 현재 인덱스값이 i와 같으면

            indicators[i].className = 'active'   : 현재인디케이터의 class 이름을 active로 변경한다

        }

        else{

            indicators[i].className = ''; : 아니면 빈공간으로 둔다

        }

    }

 

>> 클릭을 통해 움직일때마다 인덱스 값이 바뀌면서 div의 클래스 이름이 다른 div로 바뀌고 그럼 설정된 div의 css가 적용된다

 

function updateSlideButtonVisalbe(carouselElem, currentIndex, licount){
    var left = carouselElem.querySelector('.slide-left');
    var right = carouselElem.querySelector('.slide-right');

    if(currentIndex>0){
        left.style.display = 'block';
    }else{
        left.style.display = 'none';
    }

    if(currentIndex < licount - 1){
        right.style.display = 'block';
    }else{
        right.style.display = 'none';
    }
}

 

 

 

function updateSlideButtonVisalbe(carouselElem, currentIndex, licount) : 매개변수가 3개인 updateSlideButtonVisalbe함수를 선언

 

 

var left = carouselElem.querySelector('.slide-left'); : slide-left의 클래스 이름을 가진 태그를 left에 대입

    var right = carouselElem.querySelector('.slide-right'); : slide-right의 클래스 이름을 가진 태그를 right에 대입

 

    if(currentIndex>0){ : 현재 인덱스 값이 0보다 크다면

        left.style.display = 'block'; : 왼쪽버튼을 보여주고

    }else{

        left.style.display = 'none'; : 아니면 사라진다

    }

 

    if(currentIndex < licount - 1){ : 현재 인덱스 값이 마지막 페이지이면

        right.style.display = 'block'; : 오른쪽 버튼이 보여지고

    }else{

        right.style.display = 'none'; : 아니라면 사라진다

    }

 

 

기능을 설명하기 위해선 작성했던 모든 코드들을 보여줘야 해서 이렇게 작성해 보았따 하하핫

 

너무 어려운걸 내가 했는데도 시간이 오래 지나서인가 헷갈리네 다시 느낌 충만하게 가보자구!