jQuery를 이용한 슬라이드 애니메이션 01

안녕하세요. 오늘은 필자가 웹디자인기능사 실기를 준비하면서 쓰는 jQuery를 이용한 슬라이드 애니메이션 글 첫번째입니다.

포스팅에 앞서 필자도 부족한 부분이 많으니 양해 부탁드립니다.

이 코드는 jQuery를 사용하여 이미지 슬라이더를 구현하는 예시입니다. 각 부분을 설명하겠습니다.

HTML 구조:

<section id="section">
    <div class="sliderWrap">
        <div class="slider s1"><img src="이미지링크"
                alt="">
            <span>이미지1</span>
        </div>
        <div class="slider s2"><img src="이미지링크"
                alt="">
            <span>이미지2</span>
        </div>
        <div class="slider s3"><img src="이미지링크"
                alt="">
            <span>이미지3</span>
        </div>
    </div>
</section>

• section 태그 내에 이미지 슬라이더를 위한 구조를 정의합니다.
• 각 이미지는 .sliderWrap 내에 .slider로 구성되어 있습니다.
• 각 .slider 요소는 이미지(img)와 이미지 설명을 나타내는 span 요소를 포함합니다.

CSS 스타일:

#section .sliderWrap {
    position: relative;
}

#section .sliderWrap .slider {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

#section .sliderWrap .slider:nth-child(1) {
    display: block;
}

#section .sliderWrap .slider > span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}

• 슬라이더와 이미지를 위한 기본적인 CSS 스타일을 정의합니다.
• .sliderWrap은 상대적(position: relative)인 요소입니다.
• 각 .slider는 절대적(position: absolute)인 요소로 설정되어 위치를 지정하며, display: none;으로 숨겨집니다.
• 첫 번째 .slider만 display: block;으로 표시되도록 설정합니다.
• span 요소는 부모 .slider의 가운데에 절대적으로 위치하도록 하고 배경색과 텍스트 스타일을 설정합니다..

JavaScript (jQuery) 코드:

$(function() {
    let currentIndex = 0; // 현재 이미지의 인덱스

    setInterval(() => {
        let nextIndex = (currentIndex + 1) % 3; // 다음 이미지의 인덱스 계산 (0, 1, 2 순환)

        $(".slider").eq(currentIndex).fadeOut(3000); // 현재 이미지를 fadeOut
        $(".slider").eq(nextIndex).fadeIn(3000); // 다음 이미지를 fadeIn

        currentIndex = nextIndex; // currentIndex를 다음 인덱스로 업데이트
    }, 3000); // 3초마다 이미지 전환
});

$(function() {
    // 메뉴 호버 이벤트 처리
    $(".menu > ul > li").mouseover(function() {
        $(".menu > ul > li > ul").stop().fadeIn(400); // 서브 메뉴 표시
        $("#header").addClass("on"); // 헤더 스타일 변경
    });

    $(".menu > ul > li").mouseout(function() {
        $(".menu > ul > li > ul").stop().fadeOut(100); // 서브 메뉴 숨김
        $("#header").removeClass("on"); // 헤더 스타일 복원
    });
});

• 이미지 슬라이더 기능을 위한 JavaScript(jQuery) 코드입니다.
• setInterval()을 사용하여 3초마다 이미지가 전환되도록 설정합니다.
• currentIndex를 사용하여 현재 표시 중인 이미지의 인덱스를 추적합니다.
• fadeOut() 및 fadeIn() 메서드를 사용하여 이미지 전환 효과를 구현합니다.
• 메뉴의 호버 이벤트를 처리하여 메뉴를 마우스 오버/아웃할 때 서브 메뉴를 표시하거나 숨깁니다.

중요 사항:

• 이미지 경로: 실제 이미지 경로가 정확하게 설정되어야 정상적으로 이미지가 표시됩니다.
• jQuery 라이브러리: 이 코드를 사용하려면 jQuery 라이브러리가 로드되어 있어야 합니다.
• 이미지 전환 효과: fadeOut() 및 fadeIn() 메서드의 지속 시간(3000ms)은 필요에 따라 조정할 수 있습니다.
• 메뉴 호버 이벤트: .menu 요소의 하위 요소에 대한 호버 이벤트를 처리하여 서브 메뉴를 표시하거나 숨깁니다.

이 코드를 사용하려면 HTML 파일 내에 jQuery 라이브러리를 포함하고, 필요한 이미지 경로를 정확하게 설정하여 사용하시면 됩니다.

이걸로 간단하게 정리를 마칩니다 오늘도 필자의 부족한 글을 읽어주셔서 감사합니다.