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>JS
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);* 결과물
'JS' 카테고리의 다른 글
| [JS] 자바스크립트 텍스트 규칙적으로 증가시키기(이중for문, array) (0) | 2021.03.31 |
|---|---|
| [JS] javascript 변수선언(var, let, const) (0) | 2021.03.31 |
| [JS] javascript mouseover, mouse out (0) | 2021.03.29 |
| [JS] 자바스크립트 return문 (0) | 2021.03.29 |
| [JS] 자바스크립트 움직이는 배너 만들기 (0) | 2021.03.29 |