반응형
1. fadeIn/out 슬라이드 배너
//css
/* 슬라이더 */
.sliderWrap {position: relative;}
.sliderWrap > div {display: none;}
.sliderWrap > div:first-child {display: block;}
.sliderWrap > .slider {
position: absolute;
left: 0; top: 0;
}
.sliderWrap > .slider img {
vertical-align: top;
}
.sliderWrap > .slider span {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 10px;
}
/* 자바스크립트 */
.sliderWrap > div {display: block;}
--------------------------------------------------------
window.onload = function(){
const slider = document.querySelectorAll(".slider"); //모든 정해놓은 클래스 이미지를 변수에 저장
slider.forEach(img => img.style.opacity = "0"); //.slider에 대한 모든 것을 슬라이더를 반복할건데, 슬라이더를 모두 투명하게 만든다.
slider[0].style.opacity='1'; // 슬라이더 맨 첫번째 이미지는 보여야 하니까 opacity 1로 값을 준다.
let imgIndex = 0; //시작하는 이미지 숫자는 0부터 시작한다.
setInterval(()=>{ //일정시간마다 반복 실행을 시켜줄건데
let nextIndex = (imgIndex +1) % slider.length;//다음 슬라이드를 가져오기 위해서 변수에 값을 넣어준다. 현재 이미지는 0이고 nextIndex=는 1이다. 이 것을 imgIndex에 다음값이 와야하니까 1을 더해주고 그 외 나머지인 %을 넣어주면 다음 슬라이드가 올 것이다. length는 배열의 크기이다.
// 그 다음 값에서 실행되야 하는것이
slider[imgIndex].style.opacity='0'; //내가 가지고 있던 이미지는 opacity 안보이게 감춰주고
slider[nextIndex].style.opacity='1'; // 다음이미지를 가져와야하니까 opacity를 보이게 해준다.
slider.forEach(img=>img.style.transition = "all 1s") //얘네가 변화를 줄건데 변화가 걸리는게 1초가 걸린다.
imgIndex = nextIndex; //다음 번호를 현재 번호를 넣는다.
},3000)
}
2. 왼쪽으로 이동하는 슬라이드(오른쪽도 가능)
/* 슬라이드 */
#slider {
overflow: hidden;
}
.sliderWrap {display: flex;}
.sliderWrap > .slider {
position: relative;
}
.sliderWrap > .slider img{
vertical-align: top;
}
.sliderWrap > .slider span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 10px 20px;
}
------------------------------------------------
window.onload = function () {
let cur = 0;
const sliderWrap = document.querySelector(".sliderWrap"); //전체 이미지
const slider = document.querySelectorAll(".slider"); // 각각의 이미지'
const sliderClone = sliderWrap.firstElementChild.cloneNode(true);//첫번째 이미지 저장
sliderWrap.appendChild(sliderClone) //복사한 이미지를 마지막에 추가
setInterval(()=> {
cur++; //현재 이미지를 증가
sliderWrap.style.marginLeft = -cur * 100 + "%"; //이미지 이동
sliderWrap.style.transition = "all 0.6s"; //이미지 애니메이셔ㅑㄴ
if(cur == 3) {
setTimeout(()=> {
sliderWrap.style.transition = "0s"; //앤미메이션 정지
sliderWrap.style.marginLeft = "0"; // 이미지 위치 초기화
cur = 0;
},700)
}
},3000);
}
3. 아래로 이동하는 슬라이드(위로도 가능)
/* 슬라이드 */
#slider {overflow: hidden;}
.sliderWrap .slider {position: relative;}
.sliderWrap .slider img {vertical-align: top;}
.sliderWrap .slider span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.4); padding: 10px; color: #fff;}
------------------------------------------------------
window.onload=function(){
const sliderWrap = document.querySelector('.sliderWrap');//슬라이더를 감싸는 변수 저장
const slider = document.querySelectorAll(".slider");//모든 슬라이더를 저장
const sliderClone = sliderWrap.firstElementChild.cloneNode(true);//첫번째 슬라이드를 복제할거다.
sliderWrap.appendChild(sliderClone);//마지막에 복제할거다. 붙여줄거다.
let cur=0;
setInterval(()=>{//아래 값을 반복적으로 할것이다.
cur++; //cur는 증가시킬것이고
sliderWrap.style.transition = "all 0.6s"; //이동속도는 0.6초
sliderWrap.style.marginTop = -cur * 300 + "px"; //위로 -300px으로 움직일것이다.
if(cur == 3) {//만약 cur이 3이 된다면 (초기 슬라이드 갯수는 원래2)
setTimeout(()=>{//맨 끝까지 도달한다면
sliderWrap.style.transition = "0s"; // 즉 순간이동하는것처럼 보이기 위해 티가 안남 사실 0번째는 엄청빠르게 위로 올라간다.
sliderWrap.style.marginTop = "0"; //위로 이동하는 것도 0
cur = 0; //cur는 다시 초기값0부터 시작하게 0으로 바꿈
},700) // 이미지 자연스럽게 바뀌게 0.7초 이 값은 위에 있는 transition보다 값이 커야함. 자연스러움을 위해
}
},3000)//전체 슬라이드 3초마다 반복되라
}
4. 뚝뚝 끊기는 화면전환 슬라이드
/* 슬라이드 */
#slider {}
.sliderWrap {position: relative; height: 100%;}
/* .sliderWrap > div {
display: none;
}
.sliderWrap > div:first-child {
display: block;
} */
.sliderWrap > .slider {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
}
.sliderWrap > .slider.s1 {
background: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider03.jpg) no-repeat center/cover;
}
.sliderWrap > .slider.s2 {
background: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider04.jpg) no-repeat center/cover;
}
.sliderWrap > .slider.s3 {
background: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider05.jpg) no-repeat center/cover;
}
.sliderWrap > .slider span {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
padding: 10px;
background: rgba(0, 0, 0, 0.4);
color: #FFF;
}
---------------------------------------------------
window.onload = function () {
let cur = 0; //현재이미지
const slider = document.querySelectorAll(".slider"); //각각의 이미지들
slider.forEach(el => el.style.opacity= "0"); //모든 이미지의 투명을 0
slider[0].style.opacity = 1; //첫번째 이미지는 투명도를 1로 설정
setInterval(()=> {
let next = (cur + 1) % slider.length;
slider[cur].style.opacity = "0";
slider[next].style.opacity = "1";
slider.forEach(el => el.style.transition = "all 0.1s");
cur = next;
},3000)
}
5. 버튼 슬라이드
window.onload=function(){
const sliderWrap = document.querySelector('.sliderWrap');//슬라이더를 감싸는 변수 저장
const slider = document.querySelectorAll(".slider");//모든 슬라이더를 저장
const slider1Clone = sliderWrap.firstElementChild.cloneNode(true);//첫번째 슬라이드를 복제할거다.
slider1Clone.classList.add('clone');//첫번째 슬라이드를 복제할거다.
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
// 여기부터 시작
const slider2Clone = sliderWrap.lastElementChild.cloneNode(true);//맨마지막 슬라이드를 복제할거다.
slider2Clone.classList.add('clone');
sliderWrap.appendChild(slider1Clone);//마지막에 복제할거다. 붙여줄거다.
// prepend(내용물) => append는 뒤에다 붙여주는건데 prepend는 앞에다 붙여주는것이다.
sliderWrap.prepend(slider2Clone); // 복제한걸 앞에 붙여주겟다.
sliderWrap.style.marginTop = -300 + "px"; // 복제했으니 첫번째 슬라이드를 보이기 위해 이동시켜줬다.
// 원래의 slider 함수를 3개의 부분으로 분리하였다.
// 1. cur++ 증감
// 2. move(cur) 실질적으로 움직이게하는 파트
// 3. setting() cur값이 우리가 생각하는 범위로 맞춰주고 margin?값도 지켜주는 역할
let cur = 0; // 현재 번호값
function move(cur){
//아래 값을 반복적으로 할것이다.
sliderWrap.style.transition = "all 0.6s"; //이동속도는 0.6초
sliderWrap.style.marginTop = -(cur + 1) * 300 + "px"; //위로 -300px으로 움직일것이다.
}
function setting(){
if(cur == 3) {
// 맨~~~~끝에 도달하면 s1으로 이동하고 cur번호도 s1에 맞는 cur = 0 으로 바꾼다.
setTimeout(()=>{//맨 끝까지 도달한다면
sliderWrap.style.transition = "0s"; // 즉 순간이동하는것처럼 보이기 위해 티가 안남 사실 0번째는 엄청빠르게 위로 올라간다.
sliderWrap.style.marginTop = "-300px"; //위로 이동하는 것도 0
cur = 0; //cur는 다시 초기값0부터 시작하게 0으로 바꿈
},700) // 이미지 자연스럽게 바뀌게 0.7초 이 값은 위에 있는 transition보다 값이 커야함. 자연스러움을 위해
}
if(cur == -1) {
// 맨~~~~처음으로 도달하면 s3로 이동하고 cur번호도 s3에 맞는 cur = 2 로 바꾼다.
setTimeout(()=>{
sliderWrap.style.transition = "0s"; // 즉 순간이동하는것처럼 보이기 위해 티가 안남 사실 0번째는 엄청빠르게 위로 올라간다.
sliderWrap.style.marginTop = "-900px"; //위로 이동하는 것도 0
cur = 2;
},700) // 이미지 자연스럽게 바뀌게 0.7초 이 값은 위에 있는 transition보다 값이 커야함. 자연스러움을 위해
}
}
// 새로운 함수 2개
// 1. go는 앞으로 진행시키는것
function go() {
cur++;
move(cur);
setting();
}
// 2. back은 뒤로 진행시키는것
function back() {
cur--;
move(cur);
setting();
}
// setInterval에 go함수를 준 이유는 슬라이드가 앞으로만 진행되니까
let interval = setInterval(go,3000);
// next버튼을 누르면
// 1. 기존 setInterval을 죽이고
// 2. 바로 앞으로 진행 즉, go 실행
// 3. 다시 인터벌 주기
next.addEventListener('click',function(){
clearInterval(interval);
go();
interval = setInterval(go,3000);
})
// next버튼을 누르면
// 1. 기존 setInterval을 죽이고
// 2. 바로 뒤로 진행 즉, back 실행
// 3. 다시 인터벌 주기
prev.addEventListener('click',function(){
clearInterval(interval);
back();
interval = setInterval(go,3000);
})
}
'Javascript > Javascript' 카테고리의 다른 글
[Javascript] 자바스크립트로 카운팅 해보기 / count 세어보기 (0) | 2023.12.17 |
---|---|
[Javascript] 자바스크립트로 드롭다운 메뉴 6종류 다뤄보기 (0) | 2023.12.09 |
[Javascript] forEach/for..in/for..of/for 구문 (0) | 2023.12.06 |
[Javascript] 코딩 기본 용어 정리(property/array...framework..) (0) | 2023.12.04 |
[Javascript] addEventListener 사용법과 이벤트(Event) 종류 / onClick의 차이 (0) | 2023.12.04 |