Study/Etc

웹디자인기능사 실기 공부 - 이미지 슬라이드

posey 2023. 3. 15. 19:21

 

  • 웹디자인기능사 실기 공부 - 이미지 슬라이드



Review
 
 
 
 
 

 

  • 웹디자인기능사 실기 공부 - 이미지 슬라이드

 

<!--html-->
<div id="slide">
  <div class="slide_img"><a href="#"><img src="images/02_banner_1.jpg" alt=""></a></div>
  <div class="slide_img"><a href="#"><img src="images/02_banner_2.jpg" alt=""></a></div>
  <div class="slide_img"><a href="#"><img src="images/02_banner_3.jpg" alt=""></a></div>
</div>

 

여기서는 alt 속성을 적지 않았지만, 실제 시험에서 alt 속성을 작성하지 않으면 감점 요인이 되기 

때문에 반드시 alt 속성을 작성 해야 한다 !!!!!

 

/*css*/
#slide{
    width: 100%; 
    height: 300px;
    overflow: hidden;
    position: relative;
}

 

 

css에서는 .slide_img 가 각 유형별로 다르기 때문에 아래쪽에서 다루도록 하겠다.

​

javascript에서는

setInterval(함수, 시간);  // 지속적으로 설정한 시간 간격으로 함수를 호출한다.

- 시간 : 밀리초(ms)단위로 사용한다.  * 3000 == 3초

​

이 메서드를 사용하여 슬라이드에 움직임을 준다.

​

 

 

<이미지 슬라이드 유형1 - 좌우>

 

 

0

/*css*/
.slide_img{
    float: left;
    position: absolute;
    top: 0; 
    left: 1200px;
}

 

left: 1200px;  // 슬라이드 이미지들의 위치는 오른쪽

이미지가 오른쪽에서 왼쪽으로 슬라이드될 것이기 때문이다.

 

 

//JavaScript
var now = 0;
var slide = $('.slide_img');

slide.eq(0).css({'left':'0'});

setInterval(function(){
    if(now < 2){
        now++;
    } else{
        now = 0;
    }
    slide.eq(now - 2).css({'left':'1200px'});
    slide.eq(now).animate({left:0});
    slide.eq(now - 1).animate({left:'-1200px'});
}, 3000);

 

var slide = $('.slide_img')  // 선택자 모양을 여러번 쓰기 번거로워서 slide로 변수로 만들었다.

​

slide.eq(0).css({'left' : '0'}) >> 첫번째 슬라이드 위치 잡기.

​

eq(now-2)   // 현재 슬라이드의 다음 슬라이드. 오른쪽에서 중앙으로 오기 전에 위치를 먼저 잡아준다.

eq(now)   // 현재 슬라이드. 중앙으로 이동한다.

eq(now-1)  //  이전 슬라이드. 슬라이드의 왼쪽으로 이동한다.

​

 

* 왜 (now + 1) 이 아니라 (now - 2) 인가?

이유는 slide_img 의 총 개수가 3개이므로 eq(index number)는 0, 1, 2 이다.

​

now + 1로 하면 마지막 슬라이드 다음 첫 번째 슬라이드로의 이동이 자연스럽지가 않다.

마지막 슬라이드 eq(2)일때,  now + 1이 3으로 적용되서 eq(0)이 이동되지 않는 듯하다.

​

하지만 더하기가 아니라 마이너스로 설정해주면 이게 다 적용이 된다.

now = 0 이어도, now - 1 = 2, now - 2 = 1로 적용이 된다.

​

 

 

 

 

<이미지 슬라이드 유형1 - 위아래>

 

 

0

 

/*css*/
.slide_img{
    position: absolute;
    top: 0; 
    left: 0;
}

 

여기서 중요한 것은 이미지들을 한 위치에 모아놓는 것이다.

첫 번째로 시작 위치는 자바스크립트에서 잡아 줄 것이다.

 

 

//javaScript
var now = 0;

$('.slide_img').eq(0).siblings().css({'top':'-300px'});

setInterval(function(){
    if(now < 2){
        now++;
    } else{
        now = 0;
    }
    $('.slide_img').eq(now - 2).css({'top':'-300px'});
    $('.slide_img').eq(now).animate({top:0});
    $('.slide_img').eq(now - 1).animate({top:'300px'});
},3000);

 

$('.slide_img').eq(0).siblings().css({'top':'-300px'});   // 처음 위치 잡아주기

 

슬라이드 처음 이미지(eq(0))의 형제요소들(siblings) 위쪽으로 300px 이동하기 라는 뜻이다.

 

 

 

 

 

<이미지 슬라이드 유형2 - 페이드>

 

 

0

 

페이드는 그냥 이미지를 다 겹쳐놓고 해당 이미지만 보이게 설정하면 된다.

 

/*css*/
.slide_img{
    position: absolute;
    top: 0; 
    left: 0;
}

 

top: 0; left: 0;  // 이미지들이 모두 겹치게 한다.

 

//JavaScript
var now = 0;

$('.slide_img:gt(0)').hide();

setInterval(function(){
    if(now < 2){
        now++;
    } else{
        now = 0;
    }
    $('.slide_img').eq(now).fadeIn().siblings().fadeOut();
}, 3000);

 

$('.slide_img:gt(0)').hide()   // 처음 화면에서 첫번째 슬라이드만 보이게 설정한다.

첫번째 슬라이드보다 인덱스 값이 큰 형제 요소들을 (gt(0)) 모두 안 보이게 설정한다.

$('.slide_img').eq(0).siblings().hide(); 랑 같은 코드이다.

​

$('.slide_img').eq(now).fadeIn().siblings().fadeOut();  // now는 fadeIn, 나머지 슬라이드는 fadeOut 한다.

반응형