[제이쿼리(jQuery) UI] 컨트롤바슬라이더 3. JS 작성

마크업 부터 시작하는 UI/컨트롤바 슬라이더 2015. 5. 4. 05:07

728x90
반응형

먼저 css 파일을 html 에서 연결시킬때와 같이 js 파일을 담을 js 폴더를 만든다.

그리고 그 js폴더 안에 js 파일을 넣어준다.



스샷은 찍지 않겠지만 저 js 폴더엔 당연히 js파일이 들어가 있다.

디렉토리 구성은 스샷에 보이는 이대로 하도록 하자.



그리고 우리는 jQuery 를 쓸꺼기 때문에 jQuery 를 쓸수있는 환경을 html 문서에 제공해 주어야 한다.

jQuery.com <- 클릭 에 접속해 보자.





스샷에 보이는 대로 저 부분을 클릭해 주자.

그럼 뭐라뭐라 막 나오는데 스크롤바를 살짝 내려 CDN 이라는 부분까지 내려보자



그럼 스샷에 보이는 대로 뭔가 코드가 작성되어 있는걸 확인 할 수 있다.

CDN 이란게 무엇인지..

일단 알고 넘어가는게 좋을꺼 같다. 모르고 쓰는것 보단 알고 쓰는게 더 좋을테니..


CDN(Content Delivery Network)접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술이다.

CDN(Contents Delivery Network) 서비스란 여러곳의 IDC 또는 ISP에 동일한 컨텐츠를 올려놓고, 접속자가 사용하는 인터넷전용회선의 종류에 따라 가장 가까운 곳에서 컨텐츠를 불러들일 수 있도록 지원하는 서비스이다.



아무튼 저기 붉은색 박스로 묶여있는 부분을 쭉 드래그 한다.

드래그 해서 html 파일에 붙혀넣어준다.

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/slider.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
cs



이렇게 작성을 하였으면 jQuery( 자바스크립트의 라이브러리 )를 쓸수있는 환경을 제공받았다. 

* jquery 홈페이지에 있는 CDN 은 앞에 http: 가 생략되어있으니 꼭 붙혀준다.



그러면 우리가 맨처음에 js 폴더에 js 파일을 만들걸 기억 하자.

jQuery 를 로딩 시켰듯이 우리가 작성해야할 js 파일도 html 에 연결시켜줘야 그 js 를 사용할수 있게 된다.

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/slider.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/slider.js"></script>
cs






그럼 js 를 작성해 보도록 하자.

js를 작성하다보면 막 위아래로 왔다리 갔다리 해야한다. 바짝 정신차리고 학습해 보도록 하자.

어떤것을 만들기 위해서 만드는 순서를 정해놓고 시작하는 편이 좋다.

1. 초기 텍스트 위치를 지정.

2. 이벤트를 연결

3. 각 텍스트와 컨트롤 버튼의 위치를 알 수 있게 data-index 를 할당

4. 이동하는 함수를 만듬

5. 초기 슬라이더의 위치를 지정




먼저 우리는 js 파일을 html 문서의 body 태그 윗쪽에 로딩시켰기 때문에

body 안의 내용이 모두 로드가 된 후에 js파일이 읽혀야 한다.

js 파일에 다음과 같이 작성해주면 문서의 준비가 완료된 후에 안의 내용을 써준다 라는 의미가 되겠다.

1
2
3
$(function(){
    
})
cs




이 사이에 작성을 하게 되는데 우리는 여기에

1. 초기 텍스트 위치를 지정.

이것부터 하도록 하자.

현재는 글자가 모두 겹쳐서 눈에 보이고 있을 것이다.

일단 모든 글자가 당장에 보일 필요도 없고, 또 어떤것을 눌렀을때 해당되는게 이미지와 글자가 보여야 하는지 기준 또한 없다.

그렇기 때문에 일단 모든 글자를 그냥 옆으로 밀어놓자!

1
2
3
4
5
6
$(function(){
    // 문서가 준비가 완료되면~
 
    $(".slider_text").css('left'-300);
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다.
})
cs



뭔가 하나를 했으면 브라우저로 확인하는 습관을 기르자.

스샷에 보이는 대로 글자가 전부 사라져 있다.

(이미지가 일부 보이는 이유는 css 파트에서 다뤘던 내용중 맨 마지막 내용. overflow 속성을 주석처리했기 때문.)

그럼 이제 아까 말했었던 '어떤것을 눌렀을때 해당되는게 이미지와 글자가 보여야 하는지 기준' 을 만들어 보자. 그전에 '사용자 정의 속성' 에 대해 알아보자.

이유는 '사용자 정의 속성' 이란걸 써서 그 기준을 만들려 하기 때문이다.

html 안에서 쓰는 태그는 정의된 속성 외에도 '사용자 정의 속성' 을 사용할 수 있다.

예를들면

1
<div width="300" height="300" ></div>
cs


우리는 이런식으로 태그에 자체에 인라인 방식으로 속성을 주는 방법 또한 알고 있을것이다.

사용자 정의 속성은 이렇게 인라인으로 입력하는데 어떻게 입력하는지 보자.

1
<div width="300" height="300" data-index="0" ></div>
cs


data- 이후의 문자는 사용자가 임의로 지정해서 사용 할 수 있다.

data- 로 시작하는 이유는 웹 표준의 권고 사항이다.





우리는 이런 '사용자 정의 속성' 을 html 에 직접 코딩해 주는게 아니라

js 에서 반복문을 돌려서 만들어 볼까 한다.


each 메소드에 대해서 <- 클릭


아무튼 each 의 설명은 저걸 클릭해서 보면 되고..

우리는 첫번째 인자값만을 활용하여 '사용자 정의 속성' 을 만들어볼 것이다.

1
2
3
4
5
6
7
8
9
10
$(function(){
    // 문서가 준비가 완료되면~
    
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
        
})

cs


자 역시 무언가 하나가 또 완성이 되었다. 그럼 또 확인해 볼 필요가 있다.

브라우저를 켜서 브라우저의 개발자 도구를 확인해 보자.



이렇게 제대로 우리가 만들어준 임의의 속성에 속성값이 들어간걸 확인해보자.


같은 방법으로 컨트롤 버튼에다가도 data-index 를 넣어주도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function(){
    // 문서가 준비가 완료되면~
 
 
    /* 1. 초기 텍스트 위치 지정 과 data-index 할당 */
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
 
    // 컨트롤 버튼의 data-index 할당
    $('.control_btn').each(function(index){
        $(this).attr('data-index',index);
    })
        
})

cs



역시 무언가 하나를 했으면 브라우저에서 확인을 해 보자.

자꾸 이렇게 확인하는게 귀찮다고 안하면 나중에 어떠한 문제가 발생을 하면 정말 뭐가 문제인지 모를때가 있다.

귀찮아 하지 않았으면 한다.





이제, 기본적인 설정이 끝났으니 이미지를 움직이는 이벤트를 작성해 보도록 하자.

우선 함수 moveSlider() 함수를 만들어 보도록 하자. 이 함수가 호출이 될때 무엇인가 기준으로 뭔가가 실행이 되어야 하는데 그 기준을 어떻게 잡을지 난감하다.

그럴때! 뭔가의 매개변수를 받으면 어떨까?

매개변수의 이름은 아무렇게나 해도 상관없지만 의미있게 index 라고 지어준다.

그 index는 아래 control_btn 을 클릭했을때 넘겨주는 변수 index 이다.

이 내용은 3번 내용과 맨 위 moveSlider 함수를 만들어 준 내용이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function(){
    // 문서가 준비가 완료되면~
 
    // 슬라이더를 움직여 주는 함수
    function moveSlider(index){
        console.log(index);
            // 넘겨받은 index가 어떠한 값을 가지고 있는지 확인해보자.
    }
 
 
    /* 1. 초기 텍스트 위치 지정 과 data-index 할당 */
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
 
    /* 컨트롤 버튼의 클릭 핸들러 지정과 data-index 할당 */
    $('.control_btn').each(function(index){
        // control_btn 에 반복문이 돌아가면서~
        $(this).attr('data-index',index)
            // 2. 현재 이것의 data-index 속성을 control_btn 에 할당해준다.
 
    }).click(function(){
        // 3. control_btn 을 클릭하게 되면
        var index = $(this).attr('data-index');
            // index 라는 변수에 현재 누른 control_btn 의 data-index 속성의 속성값을 읽어온다.
        moveSlider(index);
            // 그리고 moveSlider 라는 선언적 함수를 호출하게 되는데 호출할때에 매개변수로
            // 위에 정의한 index 변수에 담긴 내용을 보내준다.
    });
        
})

cs


무엇가 또 하나 만들었다.

하나가 아닌가... 여튼

위의 코드와 비교해 보면서 무엇이 바뀌였는지 확인하면서 공부하는게 중요하다.

브라우저를 키고 콘솔창을 확인해 보자.




이 콘솔창에 표시된 숫자가 무엇을 의미하는지 다시한번 되짚고 넘어가자.

저 숫자는 콘트롤 바를 순서대로 클릭했을때마다 하나씩 생겼다.

즉 콘트롤 바를 클릭하면 함수 moveSlider 를 호출하면서 넘겨받은 매개변수에 저장된 값을 찍어줬다는 이야기가 된다.



이제 마지막 작업을 해보도록 하자.

4번째 작업이므로 알아보기 쉽게 주석을 4-1, 4-2~~~ 달아놓겠다.

moveSlider 함수에 내용을 집어 넣는 작업이다.

여기선 몇가지 정해놓고 시작하는 편이 좋을꺼 같다.

4-1. 슬라이더 이동

4-2. css에 정의한 임의의 클래스 'active' 를 줬다 뺐다

4-3. 글자를 이동


1번부터 '눈으로 확인하면서' 작업하도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(function(){
    // 문서가 준비가 완료되면~
 
    // 슬라이더를 움직여 주는 함수
    function moveSlider(index){
        // console.log(index);
            // 넘겨받은 index가 어떠한 값을 가지고 있는지 확인해보자.
 
        // 4-1. 슬라이더 이동
        var willMoveLeft = -(index * 600);
        console.log(willMoveLeft);
            // 클릭 이벤트가 일어나서 넘겨받은 index 값에 600을 곱하고 나온 값을 음수로 만들어 준다.
        $(".img_wrap").animate({left : willMoveLeft},"slow");
    }
 
 
    /* 1. 초기 텍스트 위치 지정 과 data-index 할당 */
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
 
    /* 컨트롤 버튼의 클릭 핸들러 지정과 data-index 할당 */
    $('.control_btn').each(function(index){
        // control_btn 에 반복문이 돌아가면서~
        $(this).attr('data-index',index)
            // 2. 현재 이것의 data-index 속성을 control_btn 에 할당해준다.
 
    }).click(function(){
        // 3. control_btn 을 클릭하게 되면
        var index = $(this).attr('data-index');
            // index 라는 변수에 현재 누른 control_btn 의 data-index 속성의 속성값을 읽어온다.
        moveSlider(index);
            // 그리고 moveSlider 라는 선언적 함수를 호출하게 되는데 호출할때에 매개변수로
            // 위에 정의한 index 변수에 담긴 내용을 보내준다.
    });
 
        
})

cs



뭔가 하나 했으니 브라우저를 당장 키고 확인해 보도록 하자.



버튼을 차례대로 눌렀다.

그리고 나온걸 콘솔로 찍어줬다.

코드 4-1 번을 유심히 살펴보자.

만약.. 두번째 버튼을 누르게 됐다면?

넘겨받은 매개변수(index) 의 값은 몇이 될까?

두번째 버튼이다. 두번째 버튼이 가지고 있는 data-index 속성의 값은 1 이다.

그 1에 600을 곱한것 이다.

알기쉽게 그림을 첨부한다.


그림의 보면 바로 이해할 수 있을꺼라 생각된다.

그렇다. 그림 하나의 너비가 600 을 가지고 있는데 저 꼭짓점은 당연히 0 의 px 값을 가지고 있을 것이고, 첫번째의 너비 600이 끝남과 동시에 두번째 이미지의 시작 부분은 600 이 될것이다.

그런데 뭔가 이상하다?

왜 음수값으로 적어놨냐.. 양수값 아닌가?

이런 의문을 가지는게 정상다.

맞다. 양수값의 위치이다.

근데...

img_wrap 라는 요소를 왼쪽으로 밀어줘야 하는데 left 값을 양수로 주게될 경우 어떠한 현상이 벌어질까?

잘 보면... 보여지는 부분은 현재 저기의 0 의 위치에 똑같이 위치해 있다.

left 에 양수값을 주게 되면 왼쪽에서 오른쪽으로 밀어버리게 된다.

만약 1 이라는 인덱스 값을 받아와서 1 * 600 을 했다고 치자. 600 만큼 오른쪽으로 밀어버리기 때문에 그냥 2번째 이미지를 볼수 있는게 아니라 첫번째 이미지를 보게 될 것이다.

우리는 왼쪽에서 더 왼쪽으로 당겨줘야 하기 때문에 음수값을 줘서 이미지를 이동시켜야 한다!


설명이 어렵다면 코드 10 번줄의 - 를 그냥 빼서 확인해 보면 된다!





4-2. css에 정의한 임의의 클래스 'active' 를 줬다 뺐다

우리는 css 파트에서 active 라는 클래스를 그냥 만들어 준적이 있다.

하지만 그 클래스를 직접적으로 사용하진 않았지.

이제 그 클래스를 이용해서 만약에 현재 보여지는 이미지가 2번째 이미지 라면 2번째 버튼에 2번째 라고 표시를 해주는 작업을 진행해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(function(){
    // 문서가 준비가 완료되면~
 
    // 슬라이더를 움직여 주는 함수
    function moveSlider(index){
        // console.log(index);
            // 넘겨받은 index가 어떠한 값을 가지고 있는지 확인해보자.
 
        // 4-1. 슬라이더 이동
        var willMoveLeft = -(index * 600);
        console.log(willMoveLeft);
            // 클릭 이벤트가 일어나서 넘겨받은 index 값에 600을 곱하고 나온 값을 음수로 만들어 준다.
        $(".img_wrap").animate({left : willMoveLeft},"slow");
 
        // 4-2. css에 정의한 임의의 클래스 'active' 를 줬다 뺐다
        $('.control_btn[data-index=' + index + ']').addClass('active');
            // control_btn 의 속성중 data-index 가 뭐뭐 인 control_btn 은 클래스명 active를 부여해 주겠다.
    }
 
 
    /* 1. 초기 텍스트 위치 지정 과 data-index 할당 */
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
 
    /* 컨트롤 버튼의 클릭 핸들러 지정과 data-index 할당 */
    $('.control_btn').each(function(index){
        // control_btn 에 반복문이 돌아가면서~
        $(this).attr('data-index',index)
            // 2. 현재 이것의 data-index 속성을 control_btn 에 할당해준다.
 
    }).click(function(){
        // 3. control_btn 을 클릭하게 되면
        var index = $(this).attr('data-index');
            // index 라는 변수에 현재 누른 control_btn 의 data-index 속성의 속성값을 읽어온다.
        moveSlider(index);
            // 그리고 moveSlider 라는 선언적 함수를 호출하게 되는데 호출할때에 매개변수로
            // 위에 정의한 index 변수에 담긴 내용을 보내준다.
    });
 
        
})

cs



무언가 하나를 했으니까

역시나 브라우저를 키고 확인하도록 하자.




클릭한 버튼에 클래스명 active 가 들어간 모습을 확인 할 수 있다.

css 파트에서 클래스명 active 가 무슨값을 가지고 있는지 확인도 다시 해보자.

Q 어? 클래스 명이 자꾸 들어가는데요? A 현재 선택된 버튼을 제외한 나머지 버튼에 클래스명을 모두 제거해 주는 부분이 필요합니다.



4-2. 현재 선택한 버튼을 제외한 나머지 버튼의 active 클래스 제거

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(function(){
    // 문서가 준비가 완료되면~
 
    // 슬라이더를 움직여 주는 함수
    function moveSlider(index){
        // console.log(index);
            // 넘겨받은 index가 어떠한 값을 가지고 있는지 확인해보자.
 
        // 4-1. 슬라이더 이동
        var willMoveLeft = -(index * 600);
        console.log(willMoveLeft);
            // 클릭 이벤트가 일어나서 넘겨받은 index 값에 600을 곱하고 나온 값을 음수로 만들어 준다.
        $(".img_wrap").animate({left : willMoveLeft},"slow");
 
        // 4-2. css에 정의한 임의의 클래스 'active' 를 줬다 뺐다
        $('.control_btn[data-index=' + index + ']').addClass('active');
            // control_btn 의 속성중 data-index 가 뭐뭐 인 control_btn 은 클래스명 active를 부여해 주겠다.
        $('.control_btn[data-index!=' + index + ']').removeClass('active');
            // control_btn 의 속성중 data-index 가 뭐뭐 가 아닌 control_btn 은 클래스명 active를 제거해 주겠다.
    }
 
 
    /* 1. 초기 텍스트 위치 지정 과 data-index 할당 */
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
 
    /* 컨트롤 버튼의 클릭 핸들러 지정과 data-index 할당 */
    $('.control_btn').each(function(index){
        // control_btn 에 반복문이 돌아가면서~
        $(this).attr('data-index',index)
            // 2. 현재 이것의 data-index 속성을 control_btn 에 할당해준다.
 
    }).click(function(){
        // 3. control_btn 을 클릭하게 되면
        var index = $(this).attr('data-index');
            // index 라는 변수에 현재 누른 control_btn 의 data-index 속성의 속성값을 읽어온다.
        moveSlider(index);
            // 그리고 moveSlider 라는 선언적 함수를 호출하게 되는데 호출할때에 매개변수로
            // 위에 정의한 index 변수에 담긴 내용을 보내준다.
    });
 
        
})

cs



뭔가 또 하나를 했다!

브라우저 키자.

그리고 확인하자.

제대로 클래스명이 빠지고 있는지!




4-3. 글자를 이동

글자를 이동하는것도 4-2 번 내용과 매우 유사하기에 그냥 코드만 남기겠다.

근데... 정말 유사하다

딱 보면 아! 할정도로...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$(function(){
    // 문서가 준비가 완료되면~
 
    // 슬라이더를 움직여 주는 함수
    function moveSlider(index){
        // console.log(index);
            // 넘겨받은 index가 어떠한 값을 가지고 있는지 확인해보자.
 
        // 4-1. 슬라이더 이동
        var willMoveLeft = -(index * 600);
        console.log(willMoveLeft);
            // 클릭 이벤트가 일어나서 넘겨받은 index 값에 600을 곱하고 나온 값을 음수로 만들어 준다.
        $(".img_wrap").animate({left : willMoveLeft},"slow");
 
        // 4-2. css에 정의한 임의의 클래스 'active' 를 줬다 뺐다
        $('.control_btn[data-index=' + index + ']').addClass('active');
            // control_btn 의 속성중 data-index 가 뭐뭐 인 control_btn 은 클래스명 active를 부여해 주겠다.
        $('.control_btn[data-index!=' + index + ']').removeClass('active');
            // control_btn 의 속성중 data-index 가 뭐뭐 가 아닌 control_btn 은 클래스명 active를 제거해 주겠다.
 
 
        // 4-3. 글자 이동
        $('.slider_text[data-index=' + index + ']').show().animate({left : 0},"slow");
            // slider_text속성중 data-index 가 뭐뭐 인 slider_text 은 -300 의 위치해 있던 위치값을 0 으로 바꿔주며 보여지게 하겠다
        $('.slider_text[data-index!=' + index + ']').hide('slow'function(){
            // slider_text속성중 data-index 가 뭐뭐 가 아닌 slider_text 은 숨겨지게 하겠다. 숨겨지는 모션이 끝나면~
            $(this).css('left'-300);
                // 이것의 위치값을 -300 으로 맞춰서 나중에 포커스가 왔을 경우 왼쪽에서 오른쪽으로 나오는 애니메이션 효과를 볼 수 있게 만들어 주겠다.
        })
    }
 
 
    /* 1. 초기 텍스트 위치 지정 과 data-index 할당 */
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
 
    /* 컨트롤 버튼의 클릭 핸들러 지정과 data-index 할당 */
    $('.control_btn').each(function(index){
        // control_btn 에 반복문이 돌아가면서~
        $(this).attr('data-index',index)
            // 2. 현재 이것의 data-index 속성을 control_btn 에 할당해준다.
 
    }).click(function(){
        // 3. control_btn 을 클릭하게 되면
        var index = $(this).attr('data-index');
            // index 라는 변수에 현재 누른 control_btn 의 data-index 속성의 속성값을 읽어온다.
        moveSlider(index);
            // 그리고 moveSlider 라는 선언적 함수를 호출하게 되는데 호출할때에 매개변수로
            // 위에 정의한 index 변수에 담긴 내용을 보내준다.
    });
 
        
})

cs


이렇게 작성한 후에..

역시 브라우저를 켜서

컨트롤 버튼을 눌러본다.


확실히 우리가 원하는 기능은 인제 잘 되는것 같긴 한데...


뭔가 이상하지 않은가...

브라우저를 딱 키자마자

딱 1번 이미지가 보이고

딱 1번 이미지가 보였으면 1번 버튼에 푸른색 불이 들어와 있어야 하고!

그리고 1번 이미지의 내용에 해당하는 부분이 좌측에서 우측으로 이동해야 하는것 아닌가?

이 모든 행동이 브라우저를 키자마자!!


그렇다.

브라우저를 켰을시엔

뭐 버튼을 클릭을 한 것도 아니고..

그렇기에 저러한 행동들이 당연히 안일어 난다.


그러면?

브라우저를 켰을시에 0 이라는 값을 moveSlider 에 전달해 준다면?

간단하다. 

진짜 마지막 5번 코드이다...

이 5번 코드는 위의 모든게 다 로딩이 되어있어야 하기 때문에

맨 아랫 부분에 넣어줘야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(function(){
    // 문서가 준비가 완료되면~
 
    // 슬라이더를 움직여 주는 함수
    function moveSlider(index){
        // console.log(index);
            // 넘겨받은 index가 어떠한 값을 가지고 있는지 확인해보자.
 
        // 4-1. 슬라이더 이동
        var willMoveLeft = -(index * 600);
        console.log(willMoveLeft);
            // 클릭 이벤트가 일어나서 넘겨받은 index 값에 600을 곱하고 나온 값을 음수로 만들어 준다.
        $(".img_wrap").animate({left : willMoveLeft},"slow");
 
        // 4-2. css에 정의한 임의의 클래스 'active' 를 줬다 뺐다
        $('.control_btn[data-index=' + index + ']').addClass('active');
            // control_btn 의 속성중 data-index 가 뭐뭐 인 control_btn 은 클래스명 active를 부여해 주겠다.
        $('.control_btn[data-index!=' + index + ']').removeClass('active');
            // control_btn 의 속성중 data-index 가 뭐뭐 가 아닌 control_btn 은 클래스명 active를 제거해 주겠다.
 
 
        // 4-3. 글자 이동
        $('.slider_text[data-index=' + index + ']').show().animate({left : 0},"slow");
            // slider_text속성중 data-index 가 뭐뭐 인 slider_text 은 -300 의 위치해 있던 위치값을 0 으로 바꿔주며 보여지게 하겠다
        $('.slider_text[data-index!=' + index + ']').hide('slow'function(){
            // slider_text속성중 data-index 가 뭐뭐 가 아닌 slider_text 은 숨겨지게 하겠다. 숨겨지는 모션이 끝나면~
            $(this).css('left'-300);
                // 이것의 위치값을 -300 으로 맞춰서 나중에 포커스가 왔을 경우 왼쪽에서 오른쪽으로 나오는 애니메이션 효과를 볼 수 있게 만들어 주겠다.
        })
    }
 
 
    /* 1. 초기 텍스트 위치 지정 과 data-index 할당 */
    $(".slider_text").css('left'-300).each(function(index){
        // slider_text 모든 요소의 위치를 좌측으로 -300 만큼 밀어버리겠다. 그리고~ 반복문을 돌면서~
        $(this).attr("data-index",index);
            // 현재 이것의 data-index 속성으로 현재 이것의 순번을 넣어주겠다.
    });
 
    /* 컨트롤 버튼의 클릭 핸들러 지정과 data-index 할당 */
    $('.control_btn').each(function(index){
        // control_btn 에 반복문이 돌아가면서~
        $(this).attr('data-index',index)
            // 2. 현재 이것의 data-index 속성을 control_btn 에 할당해준다.
 
    }).click(function(){
        // 3. control_btn 을 클릭하게 되면
        var index = $(this).attr('data-index');
            // index 라는 변수에 현재 누른 control_btn 의 data-index 속성의 속성값을 읽어온다.
        moveSlider(index);
            // 그리고 moveSlider 라는 선언적 함수를 호출하게 되는데 호출할때에 매개변수로
            // 위에 정의한 index 변수에 담긴 내용을 보내준다.
    });
 
 
    // 5. 시작하자마자 매개변수 0을 담아서 moveSlider 함수를 호출한다.
    moveSlider(0);
 
        
})

cs





이제

브라우저를 확인해 보자!

우리가 하려하던 모든 동작이 다 잘 된다.

그런데...

왜 이미지가 전부 다 보이지?

우리가 일부러 시작하기전에 어떤식으로 이미지 슬라이더가 구동이 되어지는지 알아야 하기 때문에 일부러 view 라는 녀석에게 overflow 를 주석처리 해 놓은걸 기억하자.

그 주석을 풀게된다면

구실이 제법 갖춰진 이미지 슬라이더가 완성된다.



최종 결과물


반응형