이미지 로테이터

 

view demo    download

 

 

CSS3와 jQuery를 이용한 이미지 로테이터을 만들어 보겠습니다. 여러개의 이미지가 차례로 아래로 포개져있고, 시간차를 두고 순차적으로 사라지면서 다음 이미지가 보이는 방식입니다.

 

The HTML

 

우선 HTML은 div 안에 각각 링크가 걸린 img가 있고, 이것들을 감싸고 있는 div로 구성되 있습니다. 첫번째 img의 div에는 'current' 클래스가 주어져 있는데, 후에 제이쿼리에서 화면에 보여질 이미지를 지정하는 역할을 할 중요한 요소입니다.

<div id="photoShow">
  <div class="current">
    <a href="#"><img src="" alt="Photo gallery01" ></a>
  </div>
  <div>
    <a href="#"><img src="" alt="Photo gallery02"></a>
  </div>	
  <div>
    <a href="#"><img src="" alt="Photo gallery03"></a>
  </div>
  <div>
    <a href="#"><img src="" alt="Photo gallery04"></a>
  </div>
  <div>
    <a href="#"><img src="" alt="Photo gallery05"></a>
  </div>
</div>
			  

 

The CSS

 

#photoShow 안에 모든 이미지가 겹쳐질수 있도록 position을 absolute로, z-index는 0으로 합니다.

#photoShow {
	width:500px;
	height:333px;
	margin:80px auto 10px;
	padding:20px;
	border:1px solid #333333;
}
#photoShow div {
	position:absolute;
	z-index:0;
}
			  

 

HTML에는 'previous' 클래스가 없지만 후에 제이쿼리에서 사용될 겁니다. 이미지의 순차를 두기 위해 z-index: 1로 하며, 'current' 클래스에는 z-index: 2로 가장 위에 놓이게 합니다.

#photoShow div.previous {
	z-index:1;
}
#photoShow div.current {
	z-index:2;
}
			 

 

The JAVASCRIPT

 

이제 jQuery를 이용하여 이미지가 순차적으로 페이드 아웃 & 인 되면서 돌도록 해보겠습니다.
현재 보여지는 이미지(curPhoto)과 다음 보여질 이미지(nxtPhoto)를 만들고, 마지막 이미지까지 갔을 경우 다시 처음 이미지로 돌아가서 반복하도록 합니다.

function rotateImages(){
	var curPhoto = $("#photoShow div.current");
	var nxtPhoto = curPhoto.next();
	if (nxtPhoto.length == 0)
	    nxtPhoto = $("#photoShow div:first");
        
        	  

 

현재 이미지가 가지고 있는 'current' 클래스를 지우고, 'previous' 클래스를 줍니다. z-index가 1이 되겠지만 아직 다른 이미지보다 위에 있게됩니다. 이제 다음 보여질 이미지(nxtPhoto)의 opacity를 0으로 하고 'current' 클래스를 줍니다. 다음 .animate 메소드로 opacity를 1에 1초의 속도를 준 후 callback으로 현재 이미지가 가지고 있던 'previous' 클래스를 지웁니다. 이렇게되면 nxtPhoto는 z-index: 2를 가지고 가장 위에 올라선 채 점점 보여지고, curPhoto는 z-index: 0이 됩니다.


	curPhoto.removeClass('current').addClass('previous');
	nxtPhoto.css({'opacity': '0.0'}).addClass('current').animate({'opacity': '1.0'}, 1000,
		function(){
			curPhoto.removeClass('previous');
		});
}
			  

 

마지막으로 setInterval을 주어 2초마다 이미지가 바뀌도록 합니다.

              
$(function(){
	setInterval("rotateImages()", 2000);	
});           
			 

 

view demo    download