[웹] 인프런메인페이지 구조짜기 - JAVASCRIPT[1]

인프런메인페이지 구조짜기에서 html 과 css 는 얼추 마무리되었고,

 

이제 javascript 를 적용해볼 차례다.

 

우선 상단 배너안에있는 Carousel 을 움직이도록 해보려고 한다.

 

 

 

바로 이부분이다.

 

하나만 제대로 완성해 놓으면 하단의 다른 슬라이드에도 함께 적용이 가능하다.

 

우선 생각나는대로 짜보고 수정과 리팩토링을 거치면서 동작되는걸 확인해 보려고 한다.

 

html 에서의 변화는 기존 li 구성이 4개에서 슬라이드를 확인할 수 있도록 6개로 늘려주었고

 

<ul>

<li class="test" ><a href="#"><img src="" alt="정보 보안"></a></li>

<li class="test"><a href="#"><img src="" alt="디자인"></a></li>

<li class="test"><a href="#"><img src="" alt="게임만들기"></a></li>

<li class="test"><a href="#"><img src="" alt="파이썬"></a></li>

<li class="test"><a href="#"><img src="" alt="javascript"></a></li>

<li class="test"><a href="#"><img src="" alt="Node.js"></a></li>

</ul>

 

 

css 에서는 ul 의 범위를 넘어가면 가리는 속성추가와 높이값 추가 그리고 부드러운 움직임을위해 transition 속성을 추가하였다.

 

.slide-area ul{

width:340px;

height:65px;

overflow: hidden;

margin:auto;

position: relative;

z-index: 1;

}

.slide-area ul li {

float:left;

transition: all 0.8s;

margin:0 10px;

}

 

오른쪽 버튼을 클릭시 슬라이드 이미지들이 움직이도록 구현하려고 한다.

 

1. '>' 버튼을 클릭하면 이미지가 '한 칸' 씩 이동해야한다.

2. 더이상 슬라이드 할 이미지의 목록이 없으면 처음 목록으로 돌아온다.

 

어떻게하면 한칸씩 이동할수 있을까

 

이부분은 ClickCounter 를 활용해서 체크해서 넘어가도록 만들었다.

 

let right = document.querySelector('.arrow-right');

let left = document.querySelector('.arrow-left');

let slider = document.querySelectorAll('.test');

let count = 0;

right.onclick = function () {

if(count < slider.length-4) {

count += 1;

slider[count-1].style.marginLeft = '-75px';

console.log(count);

} else {

count = 0;

slider[0].style.marginLeft = '10px';

slider[1].style.marginLeft = '10px';

}

};

 

각각의 필요한 엘리먼트들을 변수로 지정해주고

 

count 변수는 0으로 초기화 시켜준다.

 

그리고 클릭했을때 발생할 함수내부에

 

 if 문을 사용하여 count 의 체크와 체크에따른 슬라이드 이미지의 움직임을 지정하였다.

 

 else 이후에는 count를 0으로 초기화 시키면서 동시에 원래 자리로 돌아오도록 css 속성을 수정하도록 하였다.

 

일단 오른쪽 버튼은 정상적으로 잘 작동하는 편이다.

 

그.러.나 같은방식으로 왼쪽버튼을 만들게 된다면 문제가 발생한다.

 

왼쪽버튼의 조건

1. 오른쪽으로의 이동이 없으면 왼쪽의 이동도 필요없다.

2. 오른쪽으로의 이미지 슬라이드 이동이 발생했을때

3. 왼쪽버튼 클릭시 이미지가 '한 칸' 씩 이동한다.

 

즉 오른쪽 버튼을 클릭했을때의 count 값이나 상태값을 왼쪽버튼도 공유할수 있어야한다.

 

다음번에는 양쪽 버튼 모두 동작할 수 있도록 만들어보려고 한다.

 

현재상태의 스크립트는.....음... 몇줄안되지만 보기에도 수정하기에도 문제가 있어보인다.

 

li 요소가 추가될때마다 수정해줄 필요는 없도록 하였지만 else 이후는 추가를 해 주어야 이상이 없게된다.

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.