애니메이션 예제

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

목록 보기
232/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() {
            $('#control a').click(function() {
                // 버튼 클릭시 1) 이벤트가 발생한 버튼 활성화 2) 나머지 버튼 비활성화
                // $('#control a').removeClass('on');
                // $(this).addClass('on');

                $(this).addClass('on').siblings().removeClass('on');
                // .siblings - 선택한 요소를 제외한 형제요소를 찾음

                //2. 이미지 관련 처리
                // 버튼의 인덱스 구함
                // 이벤트가 발생한 버튼의 인덱스 구함
                let num = $(this).index();
                console.log(num);

                $('#pic > div').filter(':visible').stop(true).fadeOut(350);
                $('#pic > div').eq(num).stop(true).fadeIn(350);
            });
            // 초기화 시 코드 1) 첫번재 버튼 활성화 2) 첫 번쨰 이미지도 보여짐
            $('#control a:first').addClass('on');
            $('#pic > div:first').show();
        });
    </script>
        <style>
            * { 
                margin: 0; padding: 0; 
            }

            li { 
                list-style: none; 
            }

            a { 
                font-family: "돋움"; font-size: 12px; color: #000; text-decoration: none; 
            }
            
            #visual {
                width: 1000px; margin: 0 auto; position: relative;
            }
            
            #pic {
                height: 563px; overflow: hidden; position: relative; box-sizing: 1px 5px 10px; 
            }
            
            #pic > div {
                position: absolute; left: 0; top: 0; display: none; 
            }
            
            /* 컨트롤 버튼 관련 */
            #control {
                position: absolute; width: 100%; left: 0; bottom: 30px; text-align: center;
             }
            
            #control a {
                display: inline-block; width: 26px; height: 26px; background: #000; line-height: 26px; font-size: 0.8em; border-radius: 14px; margin: 0 2px;
             }
            
            #control a.on {
                background: #ff6600; 
            }
        </style>
    </style>   
</head>
<body>
   <div id="visual">
    <div id="pic">
        <div><a href="#"><img src="../img/f1.jpg" alt="1"></a></div>
        <div><a href="#"><img src="../img/f2.jpg" alt="2"></a></div>
        <div><a href="#"><img src="../img/f3.jpg" alt="3"></a></div>
        <div><a href="#"><img src="../img/f4.jpg" alt="4"></a></div>
    </div>
    <div id="control">
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
    </div>
   </div>
</body>
</html>
imjingu
이전 포스트
효과 메서드 2

다음 포스트
애니메이션 예제

개발공부

효과 메서드 2

animate() : 애니메이션 메서드

0개의 댓글
