티스토리 뷰
이런 슬라이드를 만들고싶었다....
내가 할수있는 내에서 바닐라자바스크립트로만 만들고 싶었는데
어떻게 해야하나 고민고민 하다가 일단 만들기 시작했는데
어쩌다보니 만들었다..
<body>
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="thr"></div>
<div class="fou"></div>
<div class="fiv"></div>
</div>
<button class="nextbtn">다음으로</button>
<button class="prevbtn">이전으로</button>
<script src="js/script.js"></script>
</body>
이미지는 5개를 놓았고
버튼은 이전 다음버튼 두개를 놓았다.
.container{position: relative;
width: 400px; height: 300px;
}
.container div{width:400px; height: 300px; position: absolute;}
.one{
background:url("../img/img_01.jpg");
transform:scale(0.5);
left:80%;
z-index:1;}
.two{
background:url('../img/img_02.jpg');
transform:scale(0.8);
left:130%;
z-index:2;}
.thr{
background:url('../img/img_03.jpg');
transform:scale(1);
left:200%;
z-index:3;}
.fou{
background:url('../img/img_04.jpg');
transform:scale(0.8);
left:270%;
z-index:2;}
.fiv{
background:url('../img/img_05.jpg');
transform:scale(0.5);
left:320%;
z-index:1;}
@keyframes one{
100%{
transform:scale(0.5);
left:320%;
z-index:1;}
}
@keyframes two{
100%{
transform:scale(0.5);
left:80%;
z-index:1;}
}
@keyframes thr{
100%{
transform:scale(0.8);
left:130%;
z-index:2;}
}
@keyframes fou{
100%{
transform:scale(1);
left:200%;
z-index:3;}
}
@keyframes fiv{
100%{
transform:scale(0.8);
left:270%;
z-index:2;}
}
@keyframes backone{
100%{
transform:scale(0.8);
left:130%;
z-index:2;}
}
@keyframes backtwo{
100%{
transform:scale(1);
left:200%;
z-index:3;}
}
@keyframes backthr{
100%{
transform:scale(0.8);
left:270%;
z-index:2;}
}
@keyframes backfou{
100%{
transform:scale(0.5);
left:320%;
z-index:1}
}
@keyframes backfiv{
100%{
transform:scale(0.5);
left:80%;
z-index:1;}
}
css에서 기본 위치를 잡아줬고 애니메이션 keyframes도 미리 다 적어놓았닼ㅋㅋ
이렇게 해놓고 스크립트로 애니메이션이 들어오면 실행될수 있게 ㅎㅎ..
const boxone = document.querySelector('.one'),
boxtwo = document.querySelector('.two'),
boxthr = document.querySelector('.thr'),
boxfou = document.querySelector('.fou'),
boxfiv = document.querySelector('.fiv'),
nextbtn = document.querySelector('.nextbtn'),
prevbtn = document.querySelector('.prevbtn');
var imgList = ["img/img_01.jpg","img/img_02.jpg","img/img_03.jpg","img/img_04.jpg","img/img_05.jpg"]
let a = 0,
b = 1,
c = 2,
d = 3,
e = 4;
function change(){
if(a < 4){a++}else{a = 0};
if(b < 4){b++}else{b = 0};
if(c < 4){c++}else{c = 0};
if(d < 4){d++}else{d = 0};
if(e < 4){e++}else{e = 0};
}
function changepr(){
if(a > 0){a--}else{a = 4};
if(b > 0){b--}else{b = 4};
if(c > 0){c--}else{c = 4};
if(d > 0){d--}else{d = 4};
if(e > 0){e--}else{e = 4};
}
function move(){
nextbtn.disabled = "disabled"
prevbtn.disabled = "disabled"
boxone.style.animation = "one 1s forwards"
boxtwo.style.animation = "two 1s forwards"
boxthr.style.animation = "thr 1s forwards"
boxfou.style.animation = "fou 1s forwards"
boxfiv.style.animation = "fiv 1s forwards"
}
function movepr(){
nextbtn.disabled = "disabled"
prevbtn.disabled = "disabled"
boxone.style.animation = "backone 1s forwards"
boxtwo.style.animation = "backtwo 1s forwards"
boxthr.style.animation = "backthr 1s forwards"
boxfou.style.animation = "backfou 1s forwards"
boxfiv.style.animation = "backfiv 1s forwards"
}
function stop(){
boxone.style.animation = ""
boxtwo.style.animation = ""
boxthr.style.animation = ""
boxfou.style.animation = ""
boxfiv.style.animation = ""
boxone.style.left = 80 + "%";
boxone.style.zIndex = 1;
boxone.style.transform = "scale(0.5)"
boxone.style.background = `url('${imgList[a]}')`
boxtwo.style.left = 130 + "%";
boxtwo.style.zIndex = 2;
boxtwo.style.transform = "scale(0.8)"
boxtwo.style.background = `url('${imgList[b]}')`
boxthr.style.left = 200 + "%";
boxthr.style.zIndex = 3;
boxthr.style.transform = "scale(1)"
boxthr.style.background = `url('${imgList[c]}')`
boxfou.style.left = 270 + "%";
boxfou.style.zIndex = 2;
boxfou.style.transform = "scale(0.8)"
boxfou.style.background = `url('${imgList[d]}')`
boxfiv.style.left = 320 + "%";
boxfiv.style.zIndex = 1;
boxfiv.style.transform = "scale(0.5)"
boxfiv.style.background = `url('${imgList[e]}')`
nextbtn.removeAttribute('disabled');
prevbtn.removeAttribute('disabled');
}
function pl(){
move();
setTimeout(change, 1001);
setTimeout(stop, 1002);
}
function ne(){
movepr();
setTimeout(changepr, 1001);
setTimeout(stop, 1002);
}
nextbtn.addEventListener('click', function(){
pl();
});
prevbtn.addEventListener('click', function(){
ne();
});
그리고 스크립트를 작성!
처음 문제가 한번 애니메이션이 실행되고나면 다시 실행이 안되는 문제였는데
애니메이션을 실행하고 종료후에 들어갔던 animation의 속성을 "" 로 지워버리고
다시 실행되면 다시 들어가는식으로하니까 작동을 하더라.
두번째는 애니메이션이 실행되고 이미지가 이상하게 변경되는(이동을안하다가 다시 누르면 다다음으로 이동하는 이상한..)문제가 있었는데 이건 일단 애니메이션 속성에 forwards를 넣어서 종료위치에 그대로 머물게 한다음(move(); 실행)
애니메이션이 1초에 걸쳐 실행되니 1001밀리세컨드후 이미지 배열 값들을 변경시키고 1002밀리세컨드 후에 멈추게 해줬다.
세번째문제가 그렇게하고나니까 버튼을 계속누르면 애니메이션이 끝나기도전에 혹은 다른 함수들이 실행되는도중에
또 실행되고 이러다보면 꼬이더라.
그래서 아주 무식한 방법으로 버튼을 클릭하고나면 바로 버튼의 클릭을 비활성화시키는 disabled 속성을 버튼에 넣어주었고, setTimeout(stop, 1002)가 실행되면서 마지막에 removeAttribute로 disabled 를 삭제해버려서 다시 클릭을 활성화 시켰다.
disabled가 나는 true 와 false 로 동작하는건줄 알았는데 HTML에서는 boolean 값을 못쓴다며..?
그래서 그냥 removeAttribute로 삭제해버리는 방법을 썼다..
아무튼 동작은 잘 하니까 만족하지만
네번째 문제..
코드가 너무 더럽다.......
'Study > script.js' 카테고리의 다른 글
| [자바스크립트 객체지향]생성자함수(constructor) 만들기 (0) | 2019.11.12 |
|---|---|
| [자바스크립트 객체지향]오브젝트(Object)의 생성과 메소드(method) (0) | 2019.11.12 |
| [자바스크립트] 이미지 무한슬라이드 만들기... (0) | 2019.11.04 |
| [자바스크립트] drag event (0) | 2019.11.04 |
| [자바스크립트]음수값 양수로 변환 반대의 경우도.. (0) | 2019.11.04 |
댓글