자바스크립트(Javascript) 제이쿼리(JQuery) 로 슬라이드 기능 만들어보기


우선 실행 영상,
사진들은 그냥 쇼핑몰에서 가져와서 괜찮을라나 모르겠다,,

전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,,
https://github.com/leehyolim/Balpoom
html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만
#left는 왼쪽 개발바닥모양이고
#right는 오른쪽 개발바닥모양
width가 총 1200px이라서 오른쪽이나 왼쪽으로 1200씩 더해주고 빼주는 식으로 구현.


var curPosition=1;
$(document).ready(function(){
  $('#left').click(function(){
    if(curPosition == 1){
    fnMove(4);
  }else if(curPosition == 2){
    fnMove(1);
  }else if(curPosition == 3){
    fnMove(2);
  }else if(curPosition == 4){
    fnMove(3);
  }
  });
  $('#right').click(function(){
    if(curPosition == 1){
    fnMove(2);
  }else if(curPosition == 2){
    fnMove(3);
  }else if(curPosition == 3){
    fnMove(4);
  }else if(curPosition == 4){
    fnMove(1);
  }
  });
});

function fnMove(seq){
  if(seq==1){
    position = 0;
    $('#btn_move1').css('background','#6f6f6f');
    $('#btn_move2').css('background','#f9f9f9');
    $('#btn_move3').css('background','#f9f9f9');
    $('#btn_move4').css('background','#f9f9f9');
    curPosition = 1;
  }else if(seq==2){
    position = 1205;
    $('#btn_move1').css('background','#f9f9f9');
    $('#btn_move2').css('background','#6f6f6f');
    $('#btn_move3').css('background','#f9f9f9');
    $('#btn_move4').css('background','#f9f9f9');
    curPosition = 2;
  }else if(seq==3){
    position = 2411;
    $('#btn_move1').css('background','#f9f9f9');
    $('#btn_move2').css('background','#f9f9f9');
    $('#btn_move3').css('background','#6f6f6f');
    $('#btn_move4').css('background','#f9f9f9');
    curPosition = 3;
  }else if(seq==4){
    position = 3616;
    $('#btn_move1').css('background','#f9f9f9');
    $('#btn_move2').css('background','#f9f9f9');
    $('#btn_move3').css('background','#f9f9f9');
    $('#btn_move4').css('background','#6f6f6f');
    curPosition = 4;
  }
   $('#best_pro_div').animate({scrollLeft : position}, 400);
}

댓글

이 블로그의 인기 게시물

About JVM Warm up

About idempotent

About Kafka Basic

About ZGC

sneak peek jitpack

Spring Boot Actuator readiness, liveness probes on k8s

About Websocket minimize data size and data transfer cost on cloud

About G1 GC

대학생 코딩 과제 대행 java, python, oracle 네 번째