[JS] 자바스크립트로 HTML이미지 옆으로 넘기기

져니져니95 2021. 3. 30. 16:07

2020.03.29(월)

블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열두번째날

CSS

*{
    margin: 0;
    padding: 0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    display: block;
    line-height: 0;
}

#wrap{
    width: 100%;
}

#header_wrap{
    width: 100%;
    background-color: red;
}

#header{
    width: 1200px;
    margin: 0 auto;
    height: 100px;
    background-color: blue;
}

#snb_wrap{
    width: 100%;
    height: 200px;
    position: absolute;
    background-color: yellow;
    z-index: 3;
}

#snb{
    width: 1200px;
    height: 200px;
    margin: 0 auto;
    background-color: tomato;

}

#visual_wrap{
    width: 100%;
    height: 500px;
    background-color: teal;
}

#visual{
    width: 1920px;
    height: 500px;
    margin: 0 auto;
    background-color: silver;
    position: relative;
    z-index: 1;
}

#contents{
    width: 1200px;
    margin: 0 auto;
    height: 600px;
    background-color: steelblue;
    
}

.interview_contents{
    width: 238px;
    position: relative;
    height: 500px;
    overflow: hidden;
}

.interview_contents > li{
    position: absolute;
    display: none;
}

.interview_contents > li > img{
    width: 238px;
    height: 158px;
}

.interview_contents > li.on{
    display: block;
    animation: slider1 1s;
    animation-fill-mode: forwards;
}

.interview_contents > li.out{
    display: block;
    animation: slider2 1s;
    animation-fill-mode: forwards;
}

@keyframes slider1{
    from{
        transform: translateX(+100%);
    } to{
        left:0px;
    } 
}

@keyframes slider2{
    from{
        left:0;
    } to{
        transform: translateX(-100%);
    } 
}

position: relative에서는 margin: 0 atuo; 안먹음!!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./explain.css">
</head>
<body>
    <!--
        wrap
    -->
    <div id="wrap"> <!--width:100%-->
        <div id="header_wrap"> <!--width:100%-->
            <div id="header"> <!--width:1200px-->
                <!--log gnb-->
            </div>
            <div id="snb_wrap"> <!--width:100%-->
                <div id="snb"> <!--width:1200px-->
                    <!--snb content-->
                </div>
            </div>
        </div>
        <div id="visual_wrap"> <!--width:100%-->
            <div id="visual"> <!--width:1920px-->

            </div>
        </div>
        <div id="contents"> <!--width:1200px-->
            <div id="inteview"> <!--width:600px-->
                <h2>취업자 인터뷰</h2>
                <ul class="interview_contents">
                    <!--
                        1번째 : left:0;
                        2번째 : left:238px;
                        3번째 : left:476px;
                        4번째 : left:714px;
                    -->
                    <li class="out">
                        <!--img size 238px,158px-->
                        <img src="http://www.kiweb.or.kr/nBoard/upload/file/interview//1560756325_67127_2.png" alt="">
                        <p>
                            글자내용
                        </p>
                    </li>
                    <li class="on">
                        <img src="http://www.kiweb.or.kr/nBoard/upload/file/interview//1546844612_13784_2.png" alt="">
                        <p>
                            글자내용
                        </p>
                    </li>
                    <li>
                        <img src="http://www.kiweb.or.kr/nBoard/upload/file/interview//1543220395_43861_2.png" alt="">
                        <p>
                            글자내용
                        </p>
                    </li>
                    <li>
                        <img src="http://www.kiweb.or.kr/nBoard/upload/file/interview//1588839379_51962_2.png" alt="">
                        <p>
                            글자내용
                        </p>
                    </li>
                </ul>

            </div>
        </div>
    </div>
    <script type="text/javascript" src="./explain.js"></script>
</body>
</html>

var index = 0;

function slider(){
    li = document.querySelectorAll('.interview_contents > li');

    if (index == 4){ 
        index = 0;
    }
    for(i=0; i<li.length; i++){
        var onNum = index+1;
        if(onNum ==4) {
            onNum = 0;
        }
        console.log(index,onNum);
        if(i==index){
            console.log(i,'번째 클래스명 out');
            li.item(i).setAttribute('class','out');
        }
        else if(i==onNum){
            console.log(i,'번째 클래스명 on');
            li.item(i).setAttribute('class','on');
        }
        else {
            console.log(i,'여긴 클래스를 지워라');
            li.item(i).setAttribute('class','');
        }
        
    }
    index++;
}

setInterval(slider,1000);

* 결과물