Carousel Project 2 (JavaScript, dot-list 구현하기)

캐로우셀의 기능 구현

현재까지 기능을 구현하기 위한 총체적인 그림을 그리면 아래와 같다.

캐로우셀 기능

 

dot List 아이디어

dot 을 누르면 dot 순서에 따른 이미지로 변경되고, 화살표 기능도 문제없이 작동해야 한다.

그러기 위해서는 화살표 기능에 의한 설정이 유지되어야 한다.

화살표에 의하면 현재 보여주는 이미지(위치)이전까지는 hidden이 true,

현재 이미지(위치)부터 마지막 이미지까지는 hidden이 false 여야 한다.

dot click

dot List 구현 코드

const dotlist = document.querySelector('.dot-list');

dotlist.addEventListener('click', clickDot);

 

function clickDot(event){

let elem = event.target;

if(elem.tagName !== 'LI') return;

//현재 클릭한 dot 위치 파악

cur = Number(elem.id.replace(/[^0-9]/g,''));

//cur보다 이전은 true(보여주지 않기)

//cur보다 이후는 false(보여주기)

for(let i=0; i<cur; i++){

imgs[i].hidden = true;

}

for(let i=cur; i<=n ; i++){

imgs[i].hidden = false;

}

}

1. dot list (ul) 안을 클릭하면 버블링에 의해 이벤트가 감지된다. 이때, dot(li)이 아닐수도 있기 때문에, 태그 검사를 한다.

2. event.target 의 id에 인덱스번호를 통해 클릭된 위치를 파악하고, 현재 위치(cur) 위치로 설정한다.

3. 0 ~ cur-1 까지는 hidden 속성값을 true

4. cur ~ n 까지는 hidden 속성값을 false

 

 

구현 github 주소 바로가기

https://github.com/zzinLee/Carousel.git