자바스크립트(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);
}
댓글
댓글 쓰기