[jQuery] 이미지 슬라이드 만들기

jQuery 2016. 11. 23. 12:00


 


파일첨부 : image_slider.zip





■ jQuery 이미지 슬라이드 만들기




01. 캔버스와 구성요소.




 자바스크립트와 jQuery를 사용해서 슬라이드를 시각적 효과를 구현하여 적용하려면 다음 세 가지 사항을 CSS로 미리 지정해야 한다.


 · 캔버스의 width 스타일 속성과 height 스타일 속성은 반드시 지정한다.

 · 캔버스의 position 스타일 속성은 Relative로 지정한다.

 · 캔버스의 overflow 스타일 속성은 hidden으로 지정한다.

 · 구성 요소의 position 스타일 속성은 Absolute로 지정한다.





02. 이미지 슬라이더의 HTML 태그 구성




 jQuery 슬라이더에는 다음과 같은 특성이 있다.

 

 · slider_panel : 이미지를 담는 패털로, 움직이며 이미지가 전환되는 효과를 만든다.

 · slider_text_panel : 글자를 담는 패널

 · control_panel : 컨트롤 버튼을 담는 패널이다.


 


03. 그럼 이제 image_slider.html 파일을 생성하고 아래와같이 이미지 슬라이드를 제작한다.

 image_slider.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery 슬라이드</title>
<style>
    * {
        margin:0px;
        padding:0px;
    }

    /* 애니메이션 캔버스 */
    .animation_canvas  {
        overflow:hidden;
        position:relative;
        float:left;
        width:600px;
    }
   
    .slide_section {
        float:left;
    }

    .slide_board {
        height:400px;
    }

    .move_arrow {
        height:400px;
        display:table-cell;
        vertical-align:middle;
    }

    /* 슬라이드 패널 */
    .slider_panel {
        width:3000px;
        position:relative;
    }

    /* 슬라이드 이미지 */
    .slider_image {
        float:left;
        width:600px;
        height:400px;
    }

    /* 슬라이드 텍스트 패널 */
    .slider_text_panel {
        position:absolute;
        top:200px;
        left:50px;
    }
   
    .slider_text {
        position:absolute;
        width:250px;
        height:150px;
    }

    .slider_text > h1 {
        background-color:#FFFFFF;
        opacity:0.5;
    }

    .slider_text > p {
        background-color:#C0C0C0;
        opacity:0.5;
    }

    /* 컨트롤 패널  */
    .control_panel  {
        position:absolute;
        top:375px;
        left:270px;
        height:20px;
        overflow:hidden;
    }

    .control_button {
        font-size:11px;
        width:13px;
        height:13px;
        border:1px solid #D4D4D4;
        background-color:#F4F4F4;
        position:relative;
        float:left;
        cursor:pointer;
        margin-left:3px;
        margin-right:3px;
        text-align:center;
        font-weight:bold;
    }

    /* 컨트롤 마우스 오버  */
    .control_button:hover {
        border:1px solid #F4F4F4;
        background-color:#D4D4D4;
        color:#FFFFFF;
    }
   
    /* 컨트롤 현재 영역  */
    .control_button.active {
        border:1px solid #24822A;
        background-color:#24822A;
        color:#FFFFFF;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
   
    // 슬라이드의 전체 개수를 구한다.
    var slideMax = jQuery(".control_button").length;

    // 슬라이드 이미지 좌우 이동버튼
    function moveArrow(sum) {

        var num = jQuery(".active").index();
        var idx = jQuery(".active").index() + sum;

        if(idx < 0) { idx = slideMax; }
        if(idx >= slideMax) { idx = 0; }

        moveSlider(idx);
    }

    // 슬라이드를 움직여주는 함수
    function moveSlider(index) {

        // 슬라이드를 이동합니다.
        var willMoveLeft = -(index * 600);
        jQuery(".slider_panel").animate({ left: willMoveLeft }, "slow");

        // control_button에 active클래스를 부여/제거합니다.
        jQuery(".control_button[data-index=" + index + "]").addClass("active");
        jQuery(".control_button[data-index!=" + index + "]").removeClass("active");

            // 글자를 이동합니다.
            jQuery(".slider_text[data-index=" + index + "]").show().animate({
                left : 0
            }, "slow");
            jQuery(".slider_text[data-index!=" + index + "]").hide("slow", function() {
                jQuery(this).css("left", -300);
            });
        }

        // 초기 텍스트 위치 지정 및 data-index 할당
        jQuery(".slider_text").css("left", -300).each(function(index) {
            jQuery(this).attr("data-index", index);
        });

        // 좌우 슬라이드 넘김 버튼
        jQuery("#leftMove").on("click", function() { moveArrow(-1) });
        jQuery("#rightMove").on("click", function() { moveArrow(1) });

        // 컨트롤 버튼의 클릭 핸들러 지정 및 data-index 할당
        jQuery(".control_button").each(function (index) {
            jQuery(this).attr("data-index", index);
        }).click(function () {
            var index = jQuery(this).attr("data-index");
            moveSlider(index);
        });

        // 초기 슬라이드의 위치 지정
        var randomNumber = Math.round(Math.random() * slideMax);
        moveSlider(randomNumber);
           
        // 5초마다 한번씩 슬라이드를 자동으로 다음 페이지로 넘긴다.
        setInterval(function() {
            moveArrow(1);
        }, 5000);
    });
</script>
</head>
<body style="text-align:center;">
    <h1>Slide Header</h1>
    <div class="slide_board">
        <div class="slide_section" id="leftMove">
            <div class="move_arrow">◀</div>
        </div>
        <div class="animation_canvas">
            <div class="slider_panel">
                <img class="slider_image" src="./image/girl_image01.jpg">
                <img class="slider_image" src="./image/girl_image02.jpg">
                <img class="slider_image" src="./image/girl_image03.jpg">
                <img class="slider_image" src="./image/girl_image04.jpg">
                <img class="slider_image" src="./image/girl_image05.jpg">
            </div>
            <div class="slider_text_panel">
                <div class="slider_text">
                    <h1>Jessica Jung</h1>
                    <p>블랑 앤 에클레어(대표이사, 수석 디자이너), 코리델 엔터테인먼트(소속 가수), 하이룬.</p>
                </div>
                <div class="slider_text">
                    <h1>Kim Ji-Yeon</h1>
                    <p>Loveliz - 메인보컬, 리드댄서, 비주얼</p>
                </div>
                <div class="slider_text">
                    <h1>Lim Na-Yeon</h1>
                    <p>TWICE - 리드보컬, 리드댄서</p>
                </div>
                <div class="slider_text">
                    <h1>Minatozaki Sana</h1>
                    <p>TWICE - 서브보컬, 서브래퍼</p>
                </div>
                <div class="slider_text">
                    <h1>Jeong Ye-In</h1>
                    <p>Loveliz - 서브보컬, 리드댄서</p>
                </div>
            </div>
            <div class="control_panel">
                <div class="control_button">1</div>
                <div class="control_button">2</div>
                <div class="control_button">3</div>
                <div class="control_button">4</div>
                <div class="control_button">5</div>
            </div>
        </div>
        <div class="slide_section" id="rightMove">
            <div class="move_arrow">▶</div>
        </div>
    </div>
    <h1>Test Footer</h1>
</body>
</html>




04. 출력결과는 아래와 같다.




※ 해당 예제는 문제가 많고 실전에서 사용 여부가 떨어지기에. [jQuery] 이미지 슬라이드 제작 를 참고하는것을 더 권한다.