2_슬라이드 패턴 2) 상하

2-2_슬라이드 상하.zip

0.32MB

가장 기본적인 슬라이드 쇼 패턴입니다.

 

html 구조

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

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

 

css 구조

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

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

 

.imgslide는 액자처럼 동작하기 때문에 반드시 position:relative와 overflow가 지정되어 있어야 합니다. 

.rollings는 움직여야 하므로 position:absolute;가 있어야 합니다. 

.rollings li 요소들은 각 파일들을 보관하는 개별 틀로 생각하면 됩니다. 여기에 float:left;가 있어야만

나중에 javascript로 사이즈를 늘렸을 때, 좌우 배열로 쉽게 전환할 수 있습니다.

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

javascript 구조

 

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

 

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

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

    var height = $('.rollings li').height()

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

 

2_ .rollings가 움직일 방향 대로(좌우/상하) 길이를 맞춰주기 위해 사이즈를 변경합니다.

    $('.rollings').css('height',height*length+"px");

 

3_ 움직임을 만들어 주고, 초기화 과정을 통해 반복을 준비합시다. 

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

    $('.rollings').animate({top:-height},1000,function(){

      $('.rollings li').eq(0).appendTo('rollings'); //이미 지나간 li를 가장 맨 끝으로 보냄

      $('.rollings').css('top',0); // left값 초기화

    });

},3000)