예제 소스는 3장의 이미지가 겹쳐져 있는 상태에서 첫번째 이미지는 보이고 두번째, 세번째 이미지는 감추어진 상태로 시작한다.
3초 단위로 switchImg() 함수가 호출된다. switchImg()함수는 이미지 목록의 첫번째 이미지를 감추고 목록의 뒤로 이동시키고 두번째 이미지를 화면에 표시한다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
margin:0;padding:0;
}
.slideshow{
width:127px;
height:129px;
margin:0 0 0 0;
float:left;
position:relative;
}
.slideshow img{
position:absolute;
top:0;
left:0;
border:1px solid #000;
margin:0 0 0 0;
width:127px;
height:129px;
}
.slideshow img.alt{
display:none;
}
</style>
var interval = 3000;
이미지가 교체되는 주기는 3초이다.
$('.slideshow').each(function(){
}
클래스 속성값으로 slideshow 을 갖는 각각의 객체에 대해서 파라미터로 전달된 콜백함수를 수행한다. 샘플은 slideshow 클래스를 갖는 <div>가 하나이지만 여러개를 정의할 수도 있다.
var container = $(this);
선택한 객체(DOM)를 jQuery 개체로 변환해서 변수 container 에 반환한다.
function switchImg(){
};
3초 단위로 호출되면서 보여지는 이미지를 교체하는 함수
var imgs = container.find('img');
container 객체에 포함된 객체 중에서 <img> 객체들을 찾아서 반환한다.
var first = imgs.eq(0);
<img> 객체중에서 첫번째 객체를 선택한다.
var second = imgs.eq(0);
<img> 객체중에서 두번째 객체를 선택한다.
first.fadeOut().appendTo(container);
첫번째 이미지를 감추고 이미지 목록의 마지막으로 이동시킨다.
second.fadeIn();
두번째 이미지를 표시한다.
function switchImg(){
var imgs = container.find('img');
var first = imgs.eq(0);
var second = imgs.eq(1);
first.fadeOut().appendTo(container);
second.fadeIn();
}
다음 이미지들은 소스가 동작하고 나서 3초 단위로 이미지들이 보여지는 모습 및 순서를 표현한 것이다.
'프로그램 > jQuery' 카테고리의 다른 글
| select box 값 변경, 목록 변경 (0) | 2014.04.12 |
|---|---|
| [plugin] Dynatree - JavaScript dynamic tree view plugin (0) | 2014.04.07 |
| [plugin] jQuery Cookie (1) | 2014.04.05 |
| 체크박스 또는 라디오 버튼의 체크여부 변경하기 (0) | 2014.04.02 |
| hover 메소드를 이용해서 메뉴 on, off를 구현 (0) | 2014.04.01 |
