UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
이미지롤링

설명
예제-1은 롤링버튼을 클릭하면 버튼과 대응하는 이미지를 보여주며(show) 클릭한 롤링버튼은 활성화되는 기본적인 예제이다.

예제-1 [이미지 롤링 Show&Hide]

HTML

					

CSS

					.album-wrap {width:221px; height:256px; margin:0 auto; overflow:hidden;}
					.album-wrap ul.album li {float:left;}
					
					ul.bt-roll {width:110px; margin:0 auto; margin-top:20px;}
						ul.bt-roll li {float:left; margin-right:5px;}
				

Javascript

					<script type="text/javascript">
						var $list  =$('ul.album').children();

						$('.bt-roll').children().bind('click',function(){

							var idx = $('.bt-roll').children().index(this);
							$list.hide().eq(idx).show();

							var source2 = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');
							$('.bt-roll').children().find('img').attr('src',source2);

							var source = $(this).find('img').attr('src').replace('.png','_.png');
							$(this).find('img').attr('src',source);

							return false;
							
						});
					</script>
				
설명
예제-2는 예제-1의 이미지롤링에 슬라이드 효과를 주어 자연스롭게 롤링되도록 수정하였다.

예제-2 [이미지 롤링 slide]

HTML

					

CSS

					<style type="text/css">
						.album-wrap {position:relative; width:221px; height:256px; margin:0 auto; overflow:hidden;}
						.album-wrap ul.album {position:absolute;}
						.album-wrap ul.album li {float:left; width:221px;}
						
						ul.bt-roll {width:110px; margin:0 auto; margin-top:20px;}
							ul.bt-roll li {float:left; margin-right:5px;}
					</style>
				

Javascript

					<script type="text/javascript">
						var $list = $('ul.album');
						var size = $list.children().outerWidth();
						var len =  $list.children().length;

						$list.css('width',len*size);

						$('.bt-roll').children().bind('click',function(){

							var idx = $('.bt-roll').children().index(this);
							$list.animate({'left': -(idx*size)+'px' },'normal');

							var source2 = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');
							$('.bt-roll').children().find('img').attr('src',source2);

							var source = $(this).find('img').attr('src').replace('.png','_.png');
							$(this).find('img').attr('src',source);

							return false;
							
						});		
					</script>
				
설명
예제-3은 이미지롤링에 좌우화살표를 추가하여 화살표를 클릭하면 이미지를 좌우로 슬라이드한다.
처음이나 마지막 이미지까지 롤링되면 화살표가 사라져 더이상 클릭이 되지 않는다. 이때 이미지에 대응하는 롤링버튼도 활성화된다.

예제-3 [이미지 롤링에 좌우화살표 추가하여 slide]

HTML

					
이전
다음

CSS

					<style type="text/css">
						#album-contain {width:300px; margin:0 auto;}
						.album-wrap {float:left; position:relative; width:221px; height:256px; margin:0 10px; overflow:hidden;}
						.album-wrap ul.album {position:absolute;}
						.album-wrap ul.album li {float:left; width:221px;}

						span.prev {float:left; width:25px; margin-top:120px;}
						span.next {float:left; width:25px; margin-top:120px;}
						
						ul.bt-roll {width:110px; margin:0 auto; margin-top:20px;}
							ul.bt-roll li {float:left; margin-right:5px;}
					</style>
				

Javascript

					<script type="text/javascript">
						var $list = $('#album-contain').find('ul.album');
						var $prev = $('#album-contain').find('span.prev > a');
						var $next = $('#album-contain').find('span.next > a');
						var size = $list.children().outerWidth();
						var len =  $list.children().length;
						var cnt = 0;

						$list.css('width',len*size);

						trace();

						$('.bt-roll').children().bind('click',function(){

							var idx = $('.bt-roll').children().index(this);
							cnt = idx;
							$list.animate({'left': -(cnt*size)+'px' },'normal');

							var source2 = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');
							$('.bt-roll').children().find('img').attr('src',source2);

							var source = $(this).find('img').attr('src').replace('.png','_.png');
							$(this).find('img').attr('src',source);

							trace();

							if(cnt==0){
								$prev.hide();
								$next.show();
							}
							if(cnt>=len-1){
								$prev.show();
								$next.hide();
							}
							if(cnt>0&&cnt<len-1){
								$prev.show();
								$next.show();
							}

							return false;
						});

						$next.bind('click', function(){
							if(cnt>=len-1) return false;

							cnt++;
							$list.animate({'left': -(cnt*size)+'px'}, 'normal');

							var btOff = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');
							$('.bt-roll').children().find('img').attr('src',btOff);

							var btOn =  $('.bt-roll').children().eq(cnt).find('img').attr('src').replace('.png','_.png');
							$('.bt-roll').children().eq(cnt).find('img').attr('src',btOn);

							trace();

							if(cnt > 0) $prev.show();
							if(cnt>=len-1) $(this).hide();

							return false;
						});

						$prev.bind('click', function(){
							if(cnt==0) return false;

							cnt--;
							$list.animate({'left': -(cnt*size)+'px'}, 'normal');

							var btOff = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');
							$('.bt-roll').children().find('img').attr('src',btOff);

							var btOn =  $('.bt-roll').children().eq(cnt).find('img').attr('src').replace('.png','_.png');
							$('.bt-roll').children().eq(cnt).find('img').attr('src',btOn);

							trace();

							if(cnt <= len-1) $next.show();
							if(cnt==0) $(this).hide();

							return false;
						});

						function trace(){
							$('#trace').find('span').text(cnt);
						}
					</script>
				
설명
예제-4는 좌우 화살표를 클릭하면 이미지를 좌우로 슬라이드하며 마지막까지 롤링되더라도 다음 버튼을 클릭하면 처음 이미지를 이어서 계속 보여준다. 결국 무한 롤링되며 이전 버튼을 클릭하더라도 동일하게 구현된다.
fn_rollToEx(containerID, slideID)
- containerID : 롤링이미지를 포함하고 있는 컨테이너 요소의 ID
- slideID : 롤링할 객체 ID

예제-4 [이미지 무한 롤링]

HTML

					

CSS

					<style type="text/css">
						.slide-wrap {position:relative; width:740px; height:450px; overflow:hidden;}
						ul.slide-list{ position:absolute; left;0px; }
							ul.slide-list li {position:relative; float:left; width:740px; height:450px;}	

						a#prev2 {position:absolute; left:15px; top:220px; z-index:20;}
						a#next2 {position:absolute; right:30px; top:220px; z-index:20;}
					</style>
				

Javascript

					<script type="text/javascript">
						function fn_rollToEx(containerID, slideID){

							// 롤링할 객체를 변수에 담아둔다.
							var el = $('#'+containerID).find('#'+slideID);
							var lastChild;
							var speed = 3000;
							var timer = 0;

							el.data('prev', $('#'+containerID).find('.prev'));	//이전버튼을 data()메서드를 사용하여 저장한다.
							el.data('next', $('#'+containerID).find('.next'));	//다음버튼을 data()메서드를 사용하여 저장한다.
							el.data('size', el.children().outerWidth());		//롤링객체의 자식요소의 넓이를 저장한다.
							el.data('len', el.children().length);				//롤링객체의 전체요소 개수
							el.data('animating',false);

							el.css('width',el.data('size')*el.data('len'));		//롤링객체의 전체넓이 지정한다.

							//el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
							el.data('prev').bind({
								click:function(e){
									e.preventDefault();
									movePrevSlide();
								}
							});

							//el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
							el.data('next').bind({
								click:function(e){
									e.preventDefault();
									moveNextSlide();
								}
							});

							function movePrevSlide(){
								if(!el.data('animating')){
									//롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
									var lastItem = el.children().eq(-2).nextAll().clone(true);
									lastItem.prependTo(el);		//복사된 요소를 롤링객체의 앞에 붙여놓는다.
									el.children().eq(-2).nextAll().remove();	//선택된 요소는 끝에서 제거한다
									el.css('left','-'+(el.data('size')*1+'px'));	//롤링객체의 left위치값을 재설정한다.
								
									el.data('animating',true);	//애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.

									el.animate({'left': '0px'},'normal',function(){		//롤링객체를 left:0만큼 애니메이션 시킨다.
										el.data('animating',false);
									});
								}
								return false;
							}

							function moveNextSlide(){
								if(!el.data('animating')){
									el.data('animating',true);

									el.animate({'left':'-'+(el.data('size')*1)+'px'},'normal',function(){	//롤링객체를 애니메이션 시킨다.
										//롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
										var firstChild = el.children().filter(':lt('+1+')').clone(true);
										firstChild.appendTo(el);	//복사된 요소를 롤링객체의 끝에 붙여놓는다.
										el.children().filter(':lt('+1+')').remove();	//선택된 요소를 앞에서 제거한다
										el.css('left','0px');	////롤링객체의 left위치값을 재설정한다.

										el.data('animating',false);
									});
								}
								return false;
							}

						}					
					</script>