프로그래밍/Jquery

jquery - 슬라이더 효과를 사용한 이미지 전환 방법 (이미지슬라이더)

가카리 2014. 12. 21. 16:56
반응형

라인같은 사이트를 보면 다음과 같은 이미지 슬라이더가 있습니다.



흰색 버튼을 누르면 화면이 전환됩니다. 이러한 기능을 이번에 구현해봅시다.


화면 구성을 먼저 html의 div 태그로 나누게 되는데


1. slider_panel : 실제 이미지가 들어가는 곳

2. slider_text_panel : 텍스트가 들어가는 곳

3. control_panel : 버튼이 들어가서 클릭시 이미지가 슬라이드됨.



위와같이 div태그로 화면을 구성하였습니다.


소스중에서 css에서 left 속성을 –300으로 보내는 것이 있는데 –300이면 화면


밖이므로 즉, 화면 밖으로 보내서 실제 유저의 화면에는 안보이게 하는 것입니다.


여기서 가장 주의해야 할 점은


제일 상위 css클래스인 animation_canvas(캔버스)는 overflow 옵션을 hidden과


position을 relative로 했고 하위 클래스들인 slider_panel, slider_image


등은 position을 absolute로 했다는 점입니다.


overflow 옵션 hidden은 캔버스를 넘어가는 것들은 그냥 안보이게 해라 라는


뜻이고,


position relative 속성은 자식 구성요소가 부모의 위치를 기준으로 위치를


잡으라는 뜻입니다.



즉 자바스크립트 플래시 또는 실버라이트의 시각적 효과 구현시 다음 사항을 만족해야합니다.


1. 캔버스의 width와 height 속성을 필수로 지정합니다.

2. 캔버스의 position 스타일 속성은 relative로 지정합니다.

3. 캔버스의 overflow 속성은 hidden으로 지정합니다.

4. 구성요소의 position 속성은 absolute로 지정합니다.



소스 ex1.html


<!DOCTYPE html>

<html>

<head>

        <style>

        * { margin: 0px;

        padding: 0px;

        }


        .animation_canvas{

        

        overflow: hidden;

        position: relative;

        width: 600px; height: 400px;

        

        }

        

        /* Slider Panel */

        .slider_panel { width:3000px; position:relative; }

        .slider_image { float:left; width:600px; height:400px; }

    

        /* Slider Text Panel */

        .slider_text_panel { position:absolute; top:200px; left:50px; }

        .slider_text { position:absolute; width:250px; height:150px; }

        

        /*Control panel*/

        .control_panel{

        position: absolute; top: 380px;

        left: 270px; height: 13px;

        overflow: hidden;

        }

        .control_button{

        width: 12px; height: 46px;

        position: relative;

        float: left; cursor: pointer;

        background:url('point_button.png');

        }

        

        .control_button:hover{top: -16px;}

        .control_button.active{top: -31px;}


        </style>

        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        

        $(document).ready(function (){

        //초기 텍스트 위치를 지정합니다.

        $('.slider_text').css('left', -300).each(function (index){

        $(this).attr('data-index', index);//data-index 라는 커스텀 속성을 넣습니다 값은 index

        });

        

        //컨트롤 버튼의 클릭 리스너 지정 data-index 할당

        $('.control_button').each(function (index){

        $(this).attr('data-index', index);//data-index라는 커스텀 속성을 넣습니다. 값은 index

        });

        

        function moveSlider(index){

        //슬라이더를 이동합니다.

        var willMoveLeft = -(index*600);

        $('.slider_panel').animate({left: willMoveLeft }, 'slow');

        

        //control_button active 클래스를 부여/제거합니다.

        $('.control_button[data-index=' + index + ']').addClass('active');//여기는 버튼을 누르면 파란색으로 변하게

        $('.control_button[data-index!=' + index + ']').removeClass('active');//나머지 속성은 하얀색으로 변하게함

        

        //글자를 이동합니다.

        $('.slider_text[data-index=' + index + ']').show().animate({

        left: 0

        }, 'slow');//왼쪽에서 글자가 나타나게 .

        

        $('.slider_text[data-index!=' + index + ']').hide('slow', function(){

        $(this).css('left', -300);

        });//글자를 사라지게 하고 -300으로 보냄.

        }

        

        //초기 텍스트 위치 지정 data-index 할당

        $('.slider_text').css('left', -300).each(function (index){

        $(this).attr('data-index', index);

        });

        

        //컨트롤 버튼의 클릭 리스너 지정 data-index 할당

        $('.control_button').each(function (index){

        $(this).attr('data-index', index);

        }).click(function (){

        var index = $(this).attr('data-index');

        moveSlider(index);

        });

        

        //초기 슬라이더 위치 지정

        var randomNumber = Math.round(Math.random() * 4);

        moveSlider(randomNumber);

        });

        

        </script>

</head>

<body>


        <h1>Test Header</h1>

        <div class="animation_canvas">

        <div class="slider_panel">

        <img src="Desert.jpg" class="slider_image"/>

            <img src="Hydrangeas.jpg" class="slider_image"/>

            <img src="Jellyfish.jpg" class="slider_image"/>

            <img src="Koala.jpg" class="slider_image"/>

            <img src="Lighthouse.jpg" class="slider_image"/>

        </div>

        

        <div class="slider_text_panel">

            <div class="slider_text">

                <h1>Lorem ipsum</h1>

                <p>Lorem ipsumdolorsitamet,consecteturadipiscingelit.</p>

            </div>

            <div class="slider_text">

                <h1>Nulla eget</h1>

                <p>Nulla egetsapienmauris,ornareelementumelit.</p>

            </div>

            <div class="slider_text">

                <h1>Quisque eleifend</h1>

                <p>Quisque eleifendaugueneclacuslobortisporta.</p>

            </div>

            <div class="slider_text">

                <h1>Donec</h1>

                <p>Donec a ligulalectus,euiaculisjusto.</p>

            </div>

            <div class="slider_text">

                <h1>Vivamus scelerisque</h1>

                <p>Vivamus scelerisquemaurisidnuncdictumsitamet.</p>

            </div>

        </div>       

        

        <div class="control_panel">

        <div class="control_button"></div>

        <div class="control_button"></div>

        <div class="control_button"></div>

        <div class="control_button"></div>

        <div class="control_button"></div>

        </div>

        

        </div>

        <h1>Test Header</h1>

</body>

</html>



실행 화면



버튼을 누르면 다음과 같이 화면이 바뀝니다.




반응형