JavaScript - 슬라이드 화면, setInterval, setTimeout

dev_swan·2022년 1월 13일

CSS JavaScript html

HTML-CSS-JS

목록 보기

4/19

setInterval

역할

일정한 시간 간격으로 함수 코드를 반복실행한다.

문법

strInterval(콜백함수,반복 시간) // 반복시간은 1000 = 1초

setTimeout

-역할

일정 시간 후 함수 코드를 실행 (한번만)

문법

setTimeout(콜백함수,반복시간)

슬라이드 화면

HTML

<body>
    <div id="mask">
    <ul id="visual">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
    </div>

div id= mask로 슬라이드 화면을 보이게 할 화면을 설정하고 ul li로 슬라이드화면을 설정하였다.

CSS

*{
    margin: 0;
    padding: 0;
}

ul,li {list-style: none;}

#mask{
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
    overflow: hidden;
}

#visual{
    position: relative;
    width: 300px;
    height: 300px;
    transition: all 0.5s;
}
/* 정렬 */

#visual > li {
    position:absolute;
    width: 300px;
    height: 300px;
}

#visual > li:nth-child(1){
    background:blue;
}
#visual > li:nth-child(2){
    background:green;
    left:300px;
}
#visual > li:nth-child(3){
    background:silver;
    left:600px
}
#visual > li:nth-child(4){
    background:yellow;
    left:900px
}

/* animation */

#visual.on1{
    left: 0px;
}

#visual.on2{
    left: -300px;
}

#visual.on3{
    left: -600px;
}

#visual.on4{
    left: -900px;
}

mask의(슬라이드 화면이 보일 영역) 영역을 설정하고 overflow:hidden으로 보여줄 영역을 넘어가는 슬라이드를 안보이게 하였다.
visual(슬라이드 화면)을 mask 영역에 꽉차게 보이도록 크기를 설정하고 슬라이드가 실행되는 속도를 0.5로 설정하였다.
visual(슬라이드 화면) 4개의 영역을 left로 화면크기만큼 떨어지게 만들어 일렬로 붙어있게 만들고 색상을 따로 설정하여 슬라이드 될 때 화면이 바뀌는것처럼 보이게 하였다.
visual.on으로 각 슬라이드 화면에 class가 on으로 바뀔때 left로 떨어트린 공간만큼 left를 빼서 슬라이드 화면이 보일 영역에 오게 하였다.

Javascript

<script type="text/javascript">
        let index = 0;
        let interval = setInterval(banner,1000)
        let visual = document.querySelector("#visual")

        function banner(n){
            if (index == 4) index = 0

            visual.setAttribute("class","on"+(index+1))
            index++
        }
    </script>

index를 0으로 설정하고 setInterval을 1초마다 화면이 넘어가게 설정하였다.
banner 함수에서 index의 값을 4가 넘으면 0으로 초기화하여 슬라이드 화면 갯수만큼 4가지(0,1,2,3)값 안에서 무한 반복(index++)되게 설정하였다
visual에 class 속성을 부여하여 함수가 한번 실행되면 on이 0~3까지 차례대로 반복되도록 설정하여 순서대로 슬라이드 화면이 넘어가도록 설정하였다.