[UXUI 웹디자인] 2달차 과제_29~31 / 슬라이더 만들기

과제 29_상하 슬라이드

https://ninefloor.github.io/web-practice/work/29

$(document).ready(function(){
  setInterval(slide,3000);
})

let slide_num=1;
function slide(){
  $(".slideList").animate({top:slide_num*-360});
  if(slide_num==2){
    slide_num=0;
  } else{
    slide_num+=1;
  }
}

 

 

과제 30_좌우 슬라이드

https://ninefloor.github.io/web-practice/work/30/

$(document).ready(function(){
  setInterval(slide,3000);
})

let slide_num=1;
function slide(){
  $(".slideList").animate({left:slide_num*-1200});
  if(slide_num==2){
    slide_num=0;
  } else{
    slide_num+=1;
  }
}

 

 

과제 31_페이드 인/아웃 슬라이드

https://ninefloor.github.io/web-practice/work/31/

$(document).ready(function(){
  setInterval(slide,3000);
  $(".slideImg").eq(0).fadeIn(300);
})

let slide_num=0;
function slide(){
  $(".slideImg").eq(slide_num).fadeOut(300);
  if(slide_num==2){
    slide_num=0;
  } else{
    slide_num+=1
  }
  $(".slideImg").eq(slide_num).fadeIn(300);
}

다른 변경점은 없고 각 이미지의 div를 li로 변경하여 eq 사용 가능하게끔 수정하고 모두 position: absolute; 로 지정해서 같은 위치에 오게끔 했다.