슬라이드 이펙트 01

소스 보기

JavaScript

HTML

CSS

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");

let currentIndex = 0;       // 현재 보이는 이미지
let slideCount = slider.length      // 이미지 개수

setInterval(() => {
    let nextIndex = (currentIndex + 1) % 5;  // 다음 이미지

    slider[currentIndex].style.opacity = "0";  // 첫번째 이미지를 안보이게 처리
    slider[nextIndex].style.opacity = "1";  // 두번째 이미지를 보이게 처리

    currentIndex = nextIndex;

    // slider[1].style.opacity = "0";  // 두번째 이미지를 안보이게 처리
    // slider[2].style.opacity = "1";  // 세번째 이미지를 보이게 처리

    // slider[2].style.opacity = "0";  // 세번째 이미지를 안보이게 처리
    // slider[3].style.opacity = "1";  // 네번째 이미지를 보이게 처리

    // slider[3].style.opacity = "0";  // 네번째 이미지를 안보이게 처리
    // slider[4].style.opacity = "1";  // 다섯번째 이미지를 보이게 처리

    // slider[4].style.opacity = "0";  // 다섯번째 이미지를 안보이게 처리
    // slider[0].style.opacity = "1";  // 첫번째 이미지를 보이게 처리
}, 3000);
// 1000 = 1초에 한 번씩 실행시킴

<body class="img06">
    <header id="header">
        <h1>JAVASCRIPT SLIDER EFFECT 01</h1>
        <p>슬라이드 이펙트 ① - 트랜지션 효과</p>
        <ul>
            <li class="active"><a href="sliderEffect01.html">01</a></li>
            <li><a href="sliderEffect02.html">02</a></li>
            <li><a href="sliderEffect03.html">03</a></li>
            <li><a href="sliderEffect04.html">04</a></li>
            <li><a href="sliderEffect05.html">05</a></li>
            <li><a href="sliderEffect06.html">06</a></li>
            <li><a href="sliderEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- // header -->

    <main id="main">
        <section id="sliderType01">
            <div class="slider__wrap">
                <div class="slider__img">
                    <div class="slider"><img src="../assets/img/effect_bg03.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/effect_bg04.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/effect_bg10.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/effect_bg07.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/effect_bg08.jpg" alt="이미지5"></div>
                </div>
            </div>
        </section>
    </main>
    <!-- // main -->

    <footer id="footer">
        <div class="modal__wrap">
            <div class="modal__btn">
                <label for="btn">소스 보기</label>
            </div>
            <div class="modal__cont">
                <div class="modal__box">
                    <div class="title">
                        <span class="dot" aria-label="true"></span>
                        <div class="tabs">
                            <div class="active">
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>JavaScript</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                            <div>
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>HTML</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                            <div>
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>CSS</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <span class="plus" aria-label="true">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                <path d="M2.5 8H13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M8 2.5V13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </div>
                    <div class="cont">
                        <div class="active">
<pre><code lang="language-js">const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");

let currentIndex = 0;       // 현재 보이는 이미지
let slideCount = slider.length      // 이미지 개수

setInterval(() => {
    let nextIndex = (currentIndex + 1) % 5;  // 다음 이미지

    slider[currentIndex].style.opacity = "0";  // 첫번째 이미지를 안보이게 처리
    slider[nextIndex].style.opacity = "1";  // 두번째 이미지를 보이게 처리

    currentIndex = nextIndex;

    // slider[1].style.opacity = "0";  // 두번째 이미지를 안보이게 처리
    // slider[2].style.opacity = "1";  // 세번째 이미지를 보이게 처리

    // slider[2].style.opacity = "0";  // 세번째 이미지를 안보이게 처리
    // slider[3].style.opacity = "1";  // 네번째 이미지를 보이게 처리

    // slider[3].style.opacity = "0";  // 네번째 이미지를 안보이게 처리
    // slider[4].style.opacity = "1";  // 다섯번째 이미지를 보이게 처리

    // slider[4].style.opacity = "0";  // 다섯번째 이미지를 안보이게 처리
    // slider[0].style.opacity = "1";  // 첫번째 이미지를 보이게 처리
}, 3000);
// 1000 = 1초에 한 번씩 실행시킴
</code></pre>
                        </div>
                        <div>
<pre><code lang="language-html">
    (HTML 코드 전부 넣는다. 너무 길어지므로 생략)
</code></pre>
                        </div>
                        <div>
<pre><code lang="language-css">/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative;
    width: 800px;
    height: 534px;
}
.slider {
    position: absolute;
    left: 0;
    top: 0;
}
.slider::before {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}

@media (max-width: 800px) {
    .slider__img {
        width: 400px;
        height: 224px;
    }
}
</code></pre>
                        </div>
                    </div>
                </div>
                <div class="modal__close">
                    <span class="close">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                            <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    </footer>
    <!-- // footer -->
</body>

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative;
    width: 800px;
    height: 534px;
}
.slider {
    position: absolute;
    left: 0;
    top: 0;
}
.slider::before {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}

@media (max-width: 800px) {
    .slider__img {
        width: 400px;
        height: 224px;
    }
}