210410 JavaScript jQuery FadeSlide 연습

22960 단어 자바스크립트jqueryJavaScript제이쿼리JavaScript 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 1000px;
            height: 400px;
        }
        
        #wrap div{
            width: 100%; height: 100%;
            color: bisque;
            line-height: 400px;
            text-align: center;
            font-size: 50px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        
        #wrap .box1{background-color: dodgerblue; display: block;}
        #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;}
    </style>
</head>
<body>
    <div id="wrap">
        <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>
    
    <ul class="arrow">
        <li class="prv">
            <button>Prev</button>
        </li>
        <li class="nxt">
            <button>Next</button>
        </li>
    </ul>
   
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        // next를 클릭하면 현재 슬라이드에서 다음 슬라이더로 전환
        // 마지막 슬라이드일 경우 첫 슬라이드로 돌아오기 .(infinite)
        // 화면 전환은 fadeIn(), fadeOut()

        $(".nxt").on("click", function() {
            var i = $(".view").index(); // 0
            $("#wrap div").eq(i+1).stop().fadeIn().addClass("view");
            $("#wrap div").eq(i+1).siblings().stop().fadeOut().removeClass("view");
            if ($(".box5") == 0) {
            $("#wrap div").eq(0).stop().fadeIn().addClass("view");
            
            }
        });
        $(".prv").on("click", function() {
            var j = $(".view").index(); // 0
            $("#wrap div").eq(j-1).stop().fadeIn().addClass("view");
            $("#wrap div").eq(j-1).siblings().stop().fadeOut().removeClass("view");
        });


    </script>
</body>
</html>
체인 테이블과 그룹의 귀속
이미지 분석의 연결 구성 요소 표기 알고리즘

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage