210411 JavaScript jQuery BasicSlide練習2

31450 ワード
JavaScript jquery JavaScript 2回目のクエリ テキストリンク 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap{
            overflow: hidden;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 1000px;
            height: 400px;
        }
        
        .track{
            display: flex;
            flex-wrap: wrap;
/*            width: 5000px;*/
            position: relative;
/*            left: ;*/
/*            position
                1. absolute : 부모 요소 중에서 포지션 값을 갖고 있는 요소를 기준.
            
                2. relative : 기존에 위치하던 자리에서 이동
            
                3. fixed : window를 기준으로 위치를 고정
            */
        }
        
        .track div{
            width: 1000px; height: 100%;
            color: bisque;
            line-height: 400px;
            text-align: center;
            font-size: 50px;
        }
        
        #wrap .box1{background-color: dodgerblue;}
        #wrap .box2{background-color: tomato}
        #wrap .box3{background-color: darkseagreen}
        #wrap .box4{background-color: mediumpurple}
        #wrap .box5{background-color: turquoise}
        
        .arrow{
            list-style: none;
            padding: 0;
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            padding: 0 5%;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
        }
        
        button{padding: 20px 30px;}
        
        .auto{
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
            
    </style>
</head>
<body>
   
    <div id="wrap">
        <div class="track">
            <div class="box1 view">box1</div>
            <div class="box2">box2</div>
            <div class="box3">box3</div>
            <div class="box4">box4</div>
            <div class="box5">box5</div>
        </div>
    </div>
    
    <ul class="arrow">
        <li class="prv">
            <button>Prev</button>
        </li>
        <li class="nxt">
            <button>Next</button>
        </li>
    </ul>
    
    <button class="auto">Auto Play</button>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        var boxWidth = $(".track div").width();
        var boxLength = $(".track div").length;
        var trackWidth = boxWidth * boxLength;
        var autoPlay = null; // clearInterval을 위한 변수
        
        // 슬라이더 기본 세팅
        $(".track").css("marginLeft",-boxWidth);
        $(".track div:last-child").prependTo(".track");
        $(".track").width(trackWidth);
        
        function moveSlider(i) { // 인자 i는 움직임의 방향
            $(".track").animate({
                "left" : i*boxWidth
            },1000, function() {
                $(".track").css("left",0);
                
                if(i < 0) { // next
                    $(".track div:first-child").appendTo(".track");
                } else if(i > 0){ // prev
                    $(".track div:last-child").prependTo(".track");
                }
            });
            
        }
    
        $(".nxt").on("click", function() {
            clearInterval(autoPlay); // 자동재생을 우선 멈추고
            moveSlider(-1);// 슬라이더 움직인 다음,
            if(autoPlay !== null){
                // 원래 자동재생 중이었다면!
                autoPlay = setInterval(function() {
                    moveSlider(-1);
                }, 3000); // 다시 반복 재개
            }
        });
        
        $(".prv").on("click", function() {
            clearInterval(autoPlay);
            moveSlider(1);
            if(autoPlay !== null){
                autoPlay = setInterval(function() {
                    moveSlider(-1);
                }, 3000);
            }
        });
        
        $(".auto").on("click", function() {
            $(this).toggleClass("play");
            var play = $(this).hasClass("play");
            // 클래스 여부에 따라 true or false 반환
            
            if(play){ // 클래스명을 갖고있다면,
                autoPlay = setInterval(function() {
                    moveSlider(-1);
                }, 3000); // 자동재생 시작
            } else {
                clearInterval(autoPlay); // 자동재생 멈춤
                autoPlay = null; // 변수 비우기
            }
        });
    </script>

</body>
</html>
[HTTP]メッセージ
次の展開.githubページへのJSアプリ