2_슬라이드 패턴 3) fade

2-3_슬라이드 fade.zip

0.32MB

슬라이드 쇼 좌우/상하의 기출 변형입니다. css구조와 사용하는 메소드의 차이가 있습니다.

 

html 구조

<section class="imgslide"> - <ul class="rollings"> - <li> - <img>의 구조로 만들면 됩니다.

이 구조는 어떤 상황에서도 변하지 않습니다.

 

css 구조

2-슬라이드 1)구조와 동일합니다.

<section class="imgslide"> - <ul class="rollings"> - <li> - <img>의 구조로 만들면 됩니다.

 

.imgslide는 이전과 똑같게 작성합시다.  .rollings는 포지션 속성이 있을 필요가 없습니다. 그냥 사이즈만 입력해 둡시다.

.rollings li 요소들은 각 파일들을 보관하는 개별 틀로 생각하면 됩니다. 여기에 position:absolute가 있어야만 상 하로 쌓이는 구조가 됩니다.  다만 유의할 점은 가장 마지막에 출력한 이미지가 가장 위에 올라온다는 사실입니다.

마지막으로 영역에 정확하게 들어맞지 않는 경우를 위해 img요소들에 width,height를 100%로 만들어서 꽉 채워 둡시다. 

javascript 구조

2-1구조에서 width를 height로, left를 top으로 바꾸면 됩니다.

 

크게 보면 2 구조로 되어 있습니다.

1_ 필요한 정보 값 변수로 지정하기

    var length = $('.rollings li').length; // length는 괄호가 들어가지 않음.

 

2_ 투명도 변화를 만들어 주고, 초기화 과정을 통해 반복을 준비합시다. 

setInterval(function(){ //반복 설정

    $('.rollings').fadeOut(1000,function(){

      $('.rollings li').eq(length-1).prependTo('rollings'); //이미 지나간 li를 가장 맨 앞으로 보냄

      $('.rollings li').eq(0).show(); // 가장 처음으로 돌아온 li를 다시 등장시킴.

    });

},3000)