seop's study seop's study

이번에는 지금까지 했던 모든 슬라이드 이펙트를 넣어보았습니다. 거기에 추가로 자동플레이와 플레이버튼, 정지버튼을 추가하였습니다. 페이지가 로딩되면 슬라이드는 자동으로 재생되며 닷버튼 옆에 정지버튼이 있습니다. 정지버튼을 누르면 슬라이드는 멈추고 정지버튼은 플레이버튼으로 변경됩니다. 그리고 플레이 버튼을 누르면 다시 슬라이드는 오토플레이로 변경됩니다. //slider08 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"..

설명 1번~5번 이미지 맨 앞과 맨 뒤에 이미지를 복사를 합니다. 5번 1번 2번 3번 4번 5번 1번 이미지 순으로 이미지가 생성됩니다. 그 후 맨뒤에 있는 1번이 나올 때 1번 이미지의 인덱스를 [0]으로 바꿔줍니다. 실제 맨 뒤 1번 이미지의 인덱스는 [5] 입니다. 맨 앞에 있는 5번의 이미지가 왔을 때에는 인덱스를 [4]로 바꿔줍니다. 실제 맨 앞 5번 이미지의 인덱스는 [-1]입니다. 그렇게 하면 마치 무한으로 이미지 슬라이드가 보여지는 효과를 낼 수 있습니다. //slider07 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //..

설명 화면 하단 부분에 닷 버튼을 추가합니다. 현재의 이미지 인덱스 값과 닷버튼의 인덱스 값을 같게 만들어 닷버튼을 누르면 해당 이미지로 이동합니다 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector("..

설명 이미지의 인덱스 값의 따라 '이전'버튼을 눌렀을 때 => 현재 인덱스 값의 - 1 씩 감소합니다. 이미지의 인덱스 값의 따라 '다음'버튼을 눌렀을 때 => 현재 인덱스 값의 + 1 씩 증가합니다. //slider05 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 c..

설명 메커니즘은 좌로 움직이기(Slider Effect)와 같습니다. 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다. 좌로 움직이기에서는 translate를 X축으로 줬던 반면, 위로 움직이기는 translate를 Y축으로 주고, 이미지의 총길이를 마찬가지로 X축인 width값이 아닌, Y축인 height값으로 설정해 줍니다. //slider04 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역..

설명 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다. 이번에는 setInterval()과 setTimeout()를 같이 사용해 보았습니다. setInterval()과 setTimeout()의 차이점 - setInterval : 실행중 다른 setInterval로 인해 함수가 호출되면 기존에 실행되던 함수는 종료됩니다. - setTimeout: 실행중 다른 setTimeout로 인해 함수가 호출되도 기존에 실행된 함수에 영향을 주지 않습니다. setTimeout() 이란? 설명 : 기존 동작이 한번 일어납니다. 사용 방법 var SETTIMEOUT_NAME = setTimeou..

설명 1번 사진 -> 2번 사진 -> 3번 사진 -> 4번 사진 -> 5번 사진 -> 다시 1번 사진 반복이 됩니다. setInterval() 설명 : 기본 동작이 일정한 시간과 간격으로 반복적으로 일어납니다. 사용 방법 var SETINTERVAL_NAME = setInterval(FUNCTION, TIME); 실행중인 루프 종료 방법 clearInterval(SETINTERVAL_NAME); //slider02 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.quer..

Slider Effect - setInterval()를 이용하여 이미지 슬라이드 만들기 setInterval()메서드란? 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다. Javascript //slider01 const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") const slider = document.querySelectorAll(".slider") let currentI..