Jquery[제이쿼리] 이미지[img] 슬라이드 만들기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery]로 이미지[img] 슬라이드를 만들어 보겠습니다.
슬라이드를 만드는방법은 여러방법이 있지만 전 아주 간단하게 만들어볼까해요.
그럼 잘따라오세요~

이미지 경로 잘지정해주세요~

뭐 여기까지는 처음부터 보신분들은 척하면척~ 이시겠죠? ㅎㅎ

===============================
$('img').css('width',250);
===============================
사진 크기가 너무커서 'img'대상으로 크기를 수정해봤습니다.



===============================
setInterval(function(){  
===============================
setInterval <== 일정시간 마다 함수가 실행되도록 하는 문구입니다.




===============================
   $('body').append($('img').first()); 
===============================
일정 시간마다  'body' 의 대상으로  append <== 뒤에다가 추가해준다는 뜻입니다.
추가할 내용은 <img>태그의  first() <== 첫번째를 추가한다는 뜻입니다.
쉽게말하면 1 2 3 이있으면 2 3 1 이렇게 바꾼다는 뜻이에요. 


===============================
  }, 2000);
===============================
이제 이미지가 계속 돌아갈라면 시간이 필요하겠죠?
2000 이라는 숫자는 2초라는 뜻입니다. 1000당 1초입니다.
전 2초마다 이미지가 이동하도록 하였답니다.

실행하면 첫번째는 이렇게
2초뒤에는!

1이라는 이미지가 맨뒤로가면서 2 3 이미지는 앞으로 1칸식 이동하는거죠

2초뒤에는 또 1칸식 가겠죠? ㅎㅎ

자 그럼 이번에는 이미지를 1개만 보이게 해볼께요.
===============================
$('img').hide();
$('img').first().show();
===============================
hide() <== 숨긴다는 뜻입니다. 즉 화면에 안보이도록 나중에 따로배워보도록 할꼐요.
show() <== 보이도록 하라 입니다. 그대신 first() <== 떄문에 첫번째 이미지만
보이도록 하라입니다~

실행하면 3개의 이미지중 2개는 사라지고 1개만보인답니다.
그리고 2초뒤에는

첫번째 이미지 대신 2번쨰이미지가 보인답니다.

그럼 이번에는 효과를 좀 넣어볼까요?
===============================
fadeIn() 
===============================
불투명하게 만들어 서서히 나타나게하는 효과입니다.

흐릿하게 보이는 타밍에 캡쳐를 하기위해 몇번의 시도만에! 성공하였답니다.

이번에는 다른효과를 넣어볼께요.
===============================
slideDown()
===============================
위에서 아래로 슬라이드되어 나타나는 효과랍니다.

이것도 타이밍 잡기가 힘들었답니다. ㅠ_ㅠ
오늘은 제이쿼리[jquery]로 이미지[img] 슬라이드를 만들어 보았습니다.
그럼 다음에 또만나요~