JS 자바스크립트 슬라이드 효과 만들기

들어가기에 앞서..

이번에는 js를 활용한 자바스크립트 슬라이드 효과를 제작해 보았습니다.
css, html로 제작한 포스팅도 있으니 필요하시면 참고 해주시길 바랍니다.
css, html은 짜여져있었고 js만 수정하는 형식으로 알고리즘을 작성하였습니다.

파일은 따로 받고 js를 수정하는 형식으로 제작하였습니다.

기존 화면에 가운데 슬라이드가 화살표 방향을 누르면 이동하는 효과입니다.
왼쪽 화살표를 누르면 왼쪽으로 사진이 보여지고 오른쪽을 누르면 오른쪽 사진이 보여집니다. 사진은 이름이 0~4까지 총 5장의 사진으로 순서에 따라 순환되면서 이동합니다.

왼쪽을 클릭하면 왼쪽 사진이 보입니다. 0->1 사진으로 이동

오른쪽을 클릭하면 오른쪽 사진으로 이동 0->4로 이동합니다.

html,css 슬라이드 효과처럼 스르륵 움직이지 않고 휙휙 전환되는 코드를 작성하였습니다.

Case Study

이번 자바스크립트는 함수 활용과 addEventListener ,
변수.style.background를 이용하면 풀리는 간단한 알고리즘입니다.

자바스크립트만 수정하였기 때문에 HTML,CSS는 건들이지 않았습니다
아래는 코드 입니다.

const btnL = document.querySelector(".btn-left")
const btnR = document.querySelector(".btn-right")
const img = document.querySelector(".img-container")
btnL.addEventListener('click',Lcount);
btnR.addEventListener('click',Rcount);

let c = 0;
function Lcount() {
    if(c===4){
        c=0;
    }
    else{
        c++;
    }
    img.style.background = `url("./img/contBcg-${c}.jpeg")`;
    console.log(`${c}.jpeg`)
    console.log(c)
    if(c>=4) {
        c = -1;
    }
}

function Rcount() {
    if(c===0){
        c=4;
    }else if(c<0){
        c=3;
    }
    else{
        c--;
    }
    img.style.background = `url("./img/contBcg-${c}.jpeg")`;
    console.log(`${c}.jpeg`)
    console.log(c)
    
};

querySelector 로 html의 선언된 버튼들을 선택합니다.
저는 왼쪽을 btnL, 오른쪽을 btnR로 할당하였습니다.
img가 보이이는 슬라이드를 img로 할당하였습니다.

이후 addEventListener로 클릭시 어떻게 변환할것인지 선언해줍니다.

btnL.addEventListener('click',Lcount);
btnR.addEventListener('click',Rcount);

클릭시 함수 Lcount, Rcount가 실행됩니다.
이때 함수를 Lcount()로 실행해버리면 클릭하기도 전에 함수가 실행되어 버립니다. ex) ('click',Lcount());

두번째로 각각의 함수들을 제작해줍니다. 답지에서는 간단하게 제작하였는데
저는 구동해보면서 오류나는 상황에 값들을 if문으로 사례를 추가해서 오류를 수정해나갔습니다.

Lcount함수를 보면

function Lcount() {
    if(c===4){
        c=0;
    }
    else{
        c++;
    }
    img.style.background = `url("./img/contBcg-${c}.jpeg")`;
    console.log(`${c}.jpeg`)
    console.log(c)
    if(c>=4) {
        c = -1;
    }
}

c를 함수 이전에 먼저 0으로 선언해 놓습니다.
이미지 파일들이 숫자들이 달라진다는 점을 활요해 c값을 이용해서
숫자를 변경하며 이미지를 변경합니다.

c가 4값일때, 그리고 4이상일 경우 등의 사례를 추가하였고
c++값으로 c가 1씩 증가하도록 함수를 설정하였습니다.

여기서 if(c=4)라고 하면 c=4값으로 계속 나오는데 아직 이유를 모르겠습니다.
c===4와 일치하다 라고 해야지 구동이 정상적으로 이루어집니다.

반대로 Rcount함수는

function Rcount() {
    if(c===0){
        c=4;
    }else if(c<0){
        c=3;
    }
    else{
        c--;
    }
    img.style.background = `url("./img/contBcg-${c}.jpeg")`;
    console.log(`${c}.jpeg`)
    console.log(c)
    
};

c가 0값일 경우 , 음수일 경우 사례를 만들고
1씩 감소하도록 c값을 조절하였습니다.

결과로는 잘 구동됩니다. 1차적으로 함수를 지정하였을때
사진은 왼쪽 버튼 혹은 오른쪽 버튼을 누를때 사진이 잘 바뀌었는데
어떠한 상황에서 왼쪽 누르고 오른쪽 누르면 사진이 랜덤으로 나온다거나
하는 문제를 만나게 되며 함수를 수정해 나가면서 결국 최종적으로 수정을 하여 문제를 해결해낼수 있었습니다.

Study

img.style.background = url("./img/contBcg-${c}.jpeg");

처음 어떻게 화면을 이동할지 막막해서 슬라이드 효과를 찾아보았더니
이 함수를 사용하였습니다.
자바스크립트에서 css를 다룰수있는 CSSOM이라고 합니다.
CSS Object Model은 Javascript로 CSS를 제어할 수 있는 API 모음입니다.

element.style

자바스크립트에서 css를 제어하기 기본은 style입니다.

스타일을 다룰수 있는데 또한 많은 프로퍼티를 가지고 있습니다.

setProperty(), getPropertyValue(), item(), removeProperty()

• setProperty() : 설정하기, 2개의 인자 (속성,값)
  속성-'color', 값-'red' 등등 값들을 설정할수 있습니다.
  'font-size' , '16px';

• getProperty() : 가져오기, 1개의 인자
  원하는 인자를 넣으면 인자의 값을 가지고 옵니다.
  body.style.getPropertyValue('color'); // 'red'

• item() : 가져오려는 속성의 인덱스를 인자로 사용한다.
  (img).style.item(0) // "red"

• removeProperty() : 삭제, 제거 후에는 빈 문자열을 반환합니다.
  body.style.removeProperty('color'); // 'red'

출처: https://ibrahimovic.tistory.com/56 [Web Standard]

이외에도 다양한 css구문들이 있다. 나머지는 다른 케이스 스터디를 하면서 차차 배워 나가보도록 하겠다.