반응형
<!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="0329연습.css">
</head>
<body>
<div id="wrap">
<div id="header_wrap">
<div id="header">
</div>
<div id="snb_wrap">
<div id="snb">
</div>
</div>
</div>
<div id="visual_wrap">
<div id="visual">
</div>
</div>
<div id="contents">
<div id="interview">
<h2>취업자인터뷰</h2>
<ul class="interview_content">
<li class="">
<img src="./연습해볼것!/경일이미지/1543220395_43861_2.png">
<p>내용이다1</p>
</li>
<li class="">
<img src="./연습해볼것!/경일이미지/1546844612_13784_2.png">
<p>내용이다2</p>
</li>
<li class="">
<img src="./연습해볼것!/경일이미지/1560756325_67127_2.png">
<p>내용이다3</p>
</li>
<li class="">
<img src="./연습해볼것!/경일이미지/1588839379_51962_2.png">
<p>내용이다4</p>
</li>
</ul>
</div>
</div>
</div>
<script>
function slider(){
li=document.querySelectorAll('.interview_content>li');
if(index==li.length){
index=0;
}
for(i=0; i<li.length; i++){
var a=index+1;
if(a==4){
a=0;
}
if(i==index){
li.item(i).setAttribute('class','out');
li.item(a).setAttribute('class','in');
}
}
index++;
}
setInterval(slider,2000);
</script>
</body>
</html>-> JS for구문 var a 변수를 만들지 않고
for(i=0; i<li.length; i++){
if (index+1==4){
index=0;}
or index 대신 i 를 넣어도 index or i 가 3이 될 때 값이 0이 되버려 작동이 안됨.
변수를 꼭 만들어야함.. item(a) 는 index+1 로 대체 x
i 와 index는 서로 대체 가능
교수님의 script
<script>
index=0;
function slider(){
li=document.querySelectorAll('.interview_content>li');
if(index==li.length){
index=0;
}
for(i=0; i<li.length; i++){
var onNum=index+1;
if(onNum==4){
onNum=0;
}
if(i==index){
li.item(i).setAttribute('class','out');
} else if(i==onNum){
li.item(onNum).setAttribute('class', 'in');
} else{
li.item(i).setAttribute('class','');
}
}
index++;
}
setInterval(slider,2000);
</script>여기서는 onNum=i+1 이 안됨
i==onNum이라는 if절이 있어서
onNum=i+1이 안됨
/* CSS Style sheet */
*{margin:0;padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
img{display:block;line-height:0;}
#wrap{
width:100%;
background:darkgray;
}
#header_wrap{
width:100%;
/* height:300px;*/
background:red;
}
#header{
width:1200px;
height:100px;
background:blue;
margin:0 auto;
}
#snb_wrap{
width:100%;
height:200px;
background: yellow;
position:absolute;
z-index:3;
}
#snb{
width:1200px;
margin:0 auto;
height:200px;
background:coral;
}
#visual_wrap{
width:100%;
background:darkcyan;
/* height:500px;*/
}
#visual{
width:1920px;
height:500px;
margin:0 auto;
background:tomato;
position:relative;
z-index:1;
}
/*/////////////////contents////////////////*/
#contents{
width:1200px;
height:600px;
background:darkgoldenrod;
margin:0 auto;
}
.interview_content{
width:300px;
position:relative;
height:500px;
overflow:hidden;
background:darkgreen;
}
.interview_content>li{
position:absolute;
top:0;
display:none;
}
.interview_content>li>img{
width:238px;
height:158px;
}
.interview_content>li.in{
display:block;
animation:slider1 1s;
animation-fill-mode: forwards;
}
@keyframes slider1{
from{left:238px;}to{left:0;}
}
.interview_content>li.out{
display:block;
animation:slider2 1s;
animation-fill-mode: forwards;
}
@keyframes slider2{
from{left:0px;}to{left:-238px;}
}
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [12일차 복습] JavaScript 기초 문법 연습 (0) | 2021.03.30 |
|---|---|
| [12일차]20210330 경일홈페이지 취업자인터뷰 버튼만들기 / 조건문, 반복문, 함수 function기초 복습 (0) | 2021.03.30 |
| [11일차]20210329 경일홈페이지 취업자인터뷰 이미지 왼쪽으로 움직이기 + 블록체인 특강 (0) | 2021.03.29 |
| [10일차 연습] 경일게임아카데미 홈페이지 만들기 (0) | 2021.03.28 |
| [10일차]20210326 여태까지 배운거 적용해서 경일게임아카데미 홈페이지 만들기 (0) | 2021.03.26 |
