이미지 슬라이더

imjingu·2023년 7월 30일
개발공부

목록 보기
240/481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
    <script>
        /*
        
        */

        $(function() {

        });
    </script>
    <style>
        /* 초가화 */
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        
        /* 슬라이더 */
        section {
            overflow: hidden;
            width: 600px;
            height: 500px;
            margin: 100px auto;
        }
        .sliderList {
            width: 300%;
        }
        .sliderList li {
            float: left;
            width: 33.3333%;
            height: 400px;
        }

        /* 슬라이더 버튼 */
        .btnList { clear: both; width: 90px; margin: 0 auto; padding-top: 20px;}
        .btnList span { display: block; float: left; width: 20px; height: 20px; margin: 0 5px; background: #666;
        border-radius: 20px; text-indent: -9999px; cursor: pointer;}
        .btnList .on { background-color: red;}
    </style>
</head>
<body>
    <section>
        <div>
            <ul class="sliderList">
                <li><img src="https://via.placeholder.com/600x400?text=1" /></li>
                <li><img src="https://via.placeholder.com/600x400?text=2" /></li>
                <li><img src="https://via.placeholder.com/600x400?text=3" /></li>
            </ul>
            <div class="btnList">
                <span class="btn1 on">첫번쨰</span>
                <span class="btn2">두번째</span>
                <span class="btn3">세번째</span>
            </div>
        </div>
    </section>
    <script>
        const imageWidth = 600; // 슬라이드 이미지 폭
        const move = function () {
            let idx = $('.btnList span.on').index();

            // 슬라이드 넘어갈때 불 들어오는 코드
            $(".btnList span").removeClass('on').eq((idx + 1) % 3).addClass('on');
            console.log($('.sliderList').css('margin-left'));


            // 슬라이드 이미지 넘기는 코드
            // parseInt - 문자를 정수로 형변환
            if (parseInt($('.sliderList').css('margin-left')) < -(imageWidth)) { // 3번쨰 슬라이드인 경우
                //$(".btnList span").removeClass('on').eq((idx + 1) % 3).addClass('on');
                $(".sliderList").stop().animate({marginLeft:0})
            
            }
            else {
                if (parseInt($(".sliderList").css('margin-left')) === 0) { // 1번째 슬라이드인 경우
                    //$(".btnList span").removeClass('on').eq((idx + 1) % 3).addClass('on');
                }
                else if (parseInt($(".sliderList").css('margin-left')) === -(imageWidth)) {// 2번쨰 슬라이드인 경우
                    //$(".btnList span").removeClass('on').eq((idx + 1) % 3).addClass('on');
                } 
                // 2, 3번째 이동의 경우 margin left 값의 -값 증가
                $('.sliderList').stop().animate({marginLeft: "-=" + imageWidth + "px"});
            };
        }
        // 일정한 시간 간격으로 작업을 수행하기 위해서 사용 (함수명, 1/1000 초)
        let timer = setInterval(move, 3 * 1000);

        $('.btnList span').on('click', function() {
            clearInterval(timer); // 지정된 작업은 모두 실행되고 다음 작업 스케줄이 중지
            timer = setInterval(move, 3 * 1000); // 시간을 재정의

            let num = $(this).index(); // 해당 요소의 인덱스 값을 저장
            console.log(num);
            // margin left 값을 이용해서 해당 인덱스의 이미지로 이동
            $(".sliderList").stop().animate({marginLeft: -(imageWidth) * num})
            $('.btnList span').eq(num).addClass('on').siblings().removeClass('on');
        })

        
         
    </script>
</body>
</html>
imjingu
이전 포스트
scroll 슬라이딩 이벤트

다음 포스트
이미지 슬라이더

개발공부

scroll 슬라이딩 이벤트

JSON 객체 변환, ajax

0개의 댓글
