웹디자인기능사 실기 | 슬라이드 패턴

 

 

기본 형태

 

setInterval

var num=1;

setInterval(function(){
	if(num<3){
    	...
    	num++;
    } else {
		...
        num = 1;
    }
}, 3000);

 

• num은 0에서 시작해도 됩니다. 0,1,2 나 1,2,3 이나 3초동안 동작하는 것은 마찬가지입니다. 

 

1. 위로 올라가는 패턴 (기출문제 A-1)

var num=1;
setInterval(function(){
  if(num<3){
    $('.slide ul').animate({
    	top: '-='+300
    },'slow');
  		num++;
  } else {
    $('.slide ul').animate({
    	top: 0
    },'slow');
    	num = 1;
    }
}, 3000);

 

• 이미지는 3열로 공백없이 CSS를 작성해야합니다. (display : block)
• 이미지 슬라이드 main에 ul (이미지) 리스트의 위치를 3초마다 변경해줍니다. 이미지가 올라가다가 마지막 슬라이드에서 원위치로 돌아오게 animate 되는 소스입니다.

 

2. 좌에서 우로 흘러가는 패턴

 

/* 슬라이더 메뉴 */
var num=1;
setInterval(function(){
    if(num<3){
        $('.slide ul').animate({
            left: '-='+1200
        },'slow');
        num++;
    } else {
        $('.slide ul').animate({
            left: 0
        },'fast');
        num = 1;
    }
}, 3000);

 

• 이미지는 1줄로 쭉 나열해야 합니다. (display: inline)
• 위의 1번 코드에서 top 만 left로 바꿔줬습니다.

 

 

 

 

3. FadeIn, FadeOut

 

var num=0;

$('.slide li').fadeOut(0);
$('.slide li').eq(num).fadeIn(0);  //첫번째만 보이게

setInterval(function(){
    if(num<2) {
       num++;
    } else {
       num=0;
    }
    $('.slide li').fadeOut('slow');
    $('.slide li').eq(num).fadeIn('slow');
},3000);

 

이미지는 같은 위치에 중첩되어야 합니다. (li 에서 top과 left가 0으로 주어지면 됩니다.)

 

 

 

 

관련포스트

• 웹디자인기능사 | 디자인 일반
• 웹디자인기능사 | 인터넷일반
• 웹디자인기능사 | 웹그래픽디자인
• 웹디자인 기능사 실기