[Javascript] 슬라이드 배너 자바스크립트로 다뤄보기 (fadeIn, top, left..)

출처: 웹스토리보이

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);
    })
  }