[jQuery] 이미지 슬라이드 제작[jQuery] 이미지 슬라이드 제작

Posted at 2018.03.10 17:02 | Posted in JavaScript & jQuery/jQuery




■ 이미지 슬라이드 제작




# 소스코드 - main.php

<html>
<head>
<title>:: jQuery 슬라이드 ::</title>
</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<body style="text-align:center;">
    <!-- 캔버스 크기 800px -->
    <div id="canvas" style="position:absolute;top:5%;left:5%;width:800;">
        <?php include "./slider.php"; ?>
    </div>
</body>
</html>


※ 코드를 2개로 나누고 jQuery를 main.php에 선언한 이유

 실제로 개발시 만들어 두었던 slider.php 소스코드에도 jQuery를 선언해둔 채 그대로 가져다 두었다가

 언제부터인가 슬라이드 이동이 계속 가속을 하게 되더라.

 예제 쌤플에 굳이 그럴 필요는 없지만.

 원인을 찾기위해 뺑이쳤던게 억울하고 이런 실 수를 줄이기 위해 이 예제 포스트에서도 둘로 나누어 두었다.




# 소스코드 - slider.php

<style>
    * {
        margin:0px;
        padding:0px;
    }

    /* 애니메이션 캔버스 */
    .animation_canvas  {
        overflow:hidden;
        position:relative;
        float:left;
        width:100%;
    }
    
    .slide_section {
        position:absolute;
    }
    
    #leftMove {
        top:50%;
        left:2%;
    }

    #rightMove {
        top:50%;
        left:96%;
    }

    .slide_board {
        /* height:400px; */
    }

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

    /* 슬라이드 패널 */
    .slider_panel {
        width:calc(800px * 5);    /* 사용할 크기 x 갯수 */
        position:relative;
    }

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

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

    .slider_text > h1 {
        background-color:#FFFFFF;
        opacity:0.5;
        margin:0px;
        padding:0px;
    }

    .slider_text > p {
        background-color:#C0C0C0;
        opacity:0.5;
        margin:0px;
        padding:0px;
    }

    /* 컨트롤 패널  */
    .control_panel  {
        position:absolute;
        overflow:hidden;
        top:90%;
        left:45%;
    }

    .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>
jQuery(document).ready(function() {
    
    var canvasSize = jQuery("#canvas").css("width");
    var calcSize = canvasSize.split("px");
    jQuery(".slider_image").css("width", canvasSize);
    
    // 슬라이드의 전체 개수를 구한다.
    var slideMax = jQuery(".control_button").length;

    jQuery(".slider_panel").css("width", calcSize[0] * slideMax);

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

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

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

        moveSlider(index);
    }

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

        // 슬라이드를 이동합니다.
        var willMoveLeft = -(index * calcSize[0]);
        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.floor(Math.random() * slideMax);
    moveSlider(randomNumber);

    var playAction = "";

    // 5초마다 한번씩 슬라이드를 자동으로 다음 페이지로 넘긴다.
    playAction = setInterval(function() {
        moveArrow(1);
    }, 5000);

    // 마우스가 슬라이드 위에 올라와 있는경우 / 빠져 나간 경우
    jQuery(".slide_board").hover(

        // 마우스가 슬라이드 위에 올라와 있는경우 그 움직임을 멈춘다.
        function() {
            clearInterval(playAction);
        }

        // 마우스가 슬라이드 위에 올라와있다 빠져 나간경우 자동 슬라이드를 초기화 하고 다시 시작한다.
        , function () {
            playAction = setInterval(function() {
                moveArrow(1);
            }, 5000);
        }
    );
});
</script>
<body style="text-align:center;">
    <div class="slide_board">
        <div class="animation_canvas">
            <div class="slider_panel">
                <img class="slider_image" src="./image/album_01.jpg">
                <img class="slider_image" src="./image/album_02.jpg">
                <img class="slider_image" src="./image/album_03.jpg">
                <img class="slider_image" src="./image/album_04.jpg">
                <img class="slider_image" src="./image/album_05.jpg">
            </div>
            <div class="slider_text_panel">
                <div class="slider_text">
                    <h1>TWICE</h1>
                    <p>JYP Entertainment</p>
                </div>
                <div class="slider_text">
                    <h1>Red Velvet</h1>
                    <p>SM Entertainment</p>
                </div>
                <div class="slider_text">
                    <h1>LOVELYZ</h1>
                    <p>Woollim Entertainment</p>
                </div>
                <div class="slider_text">
                    <h1>MOMOLAND</h1>
                    <p>Duble Kick Company</p>
                </div>
                <div class="slider_text">
                    <h1>GFRIEND</h1>
                    <p>Source Music Entertainment</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="leftMove">
            <div class="move_arrow">◀</div>
        </div>
        <div class="slide_section" id="rightMove">
            <div class="move_arrow">▶</div>
        </div>
    </div>
</body>




# 출력결과




# 첨부파일 : image_slider.zip




Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기