19.12.11 개발기록 -[Javascript] 화면 전환 버튼 구현하기

오늘은 저번에 포스팅했던 화면전환에서, 버튼을 클릭하면 다음페이지 및 이전 페이지로 넘어가도록 구현해보도록 하겠다.

전체 화면을 전환할 수 있는 버튼이 오른쪽 하단에 있다.

전체 화면을 보면 디-게 간지지만, 혹여나 문제가 될까 버튼부분만 캡쳐하여 올리도록 한다.

위 사진 오른쪽 하단의 왼쪽, 오른쪽 버튼을 누르면 해당 페이지로 넘어가도록 구현해본다.

이렇게 말이다.

이 친구는 왼쪽 하단을 보면 3개의 페이지 중 3번째 페이지이고

이 친구는 3개 페이지 중 2번째 페이지이다.

위와 같이 구현하기 위해서는 아주아주 간단한 알고리즘을 생각해내면 된다.

1. 각 페이지 마다 index를 부여한다. -> 첫 번째 페이지의 index = 0, 두 번째 페이지 index = 1, 세 번째 페이지는 index = 2, 이런식으로 말이다.

 <div class="box_item_swipe"><a class="box_item_number">03</a><span class="box_item_number2">/ 03</span>
    <img id="go-left" src="images/arrow-down.png" class="box_item_arrow2" onclick="slidePage2('left')">
    <img id="go-right" src="images/arrow-down.png" class="box_item_arrow3" onclick="slidePage2('right')">
 </div>

2. 그리고 우선 html 파일에 있는 각 오른쪽 왼쪽의 버튼 이미지에 onclick 이벤트를 부여한다. 저기 보이는 slidePage2는 js 파일에 미리 구현해둔 함수이다.

2-1. slidePage( )에 각 버튼 클릭 시 서로 다른 parameter를 보내 줄 수 있도록 설정해준다. 나는 왼쪽을 누르면 'left', 오른쪽을 누르면 'right'를 주었다.

3. 이제 javascript 내 slidePage() 를 살펴보자.

function slidePage2(direction) {
 
    if (index == 0) {
        if(direction == 'left') {
 
            index = 2;
 
            $("#content-two").hide(0);
            $("#content-one").hide(0);
            $("#content-three").fadeIn(0);
        
        } else if (direction == 'right') {
 
            index = 1;
            
            $("#content-one").hide(0);
            $("#content-three").hide(0);
            $("#content-two").fadeIn(0);
        }
 
 
 
 
 

4. 위에서 'left' 및 'right' 로 보내준 parameter를 direction 으로 받아준다. 그리고 1번 페이지 ( if (index == 0)) 에서 direction 이 left 이면, 세 번째에 해당하는 index = 2 를 지정해주고,

(( 미리 구현해둔 1~3번 페이지에 각각 아이디를 부여해두어야 한다 ! -> 페이지 전체 div 에 부여하면 된다 ! ))

5. 3번째 페이지를 id를 이용하여 $('#content-three') 를 fadeIn 시키고, 나머지 2개의 페이지는 hide를 이용하여 숨겨주도록 한다.

6. 만약 direction 이 right 라면, 두 번째에 해당하는 index = 1을 지정해주고,

7. 2번째 페이지를 id를 이용하여 $('#content-two')를 마찬가지로 불러오고, 나머지 2개의 페이지는 숨겨주도록 한다.

8. 이것을 이해한다면, 나머지 페이지도 똑같이 적용하면 되기에, 위 내용들을 이해하도록 한다.

 

이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :)

감사합니다 !