UI Laboratory

UI 개발을 위한 레퍼런스

jQuery 롤링에
인자(arguments)
전달하기

롤링함수에 인자를 전달하여 롤링에 다양성을 부여할 수 있다. 즉, 롤링을 자동으로 설정하거나 슬라이드되는 개수를 2개 이상으로 설정할 수도 있고 수평이 아닌 수직으로 슬라이드 되도록 방향을 바꿀 수도 있다. 이를 위해 여러가지 옵션을 포함한 인자를 함수에 전달 할 수 있고 함수는 인자값을 받는 매개변수를 선언할 수 있다.

fn_rollToEx(containerID, slideID, stepNum, autoStart)
- containerID : 롤링이미지와 버튼을 포함하고 있는 컨테이너 요소의 ID
- slideID : 롤링할 객체 ID
- stepNum : 좌우로 이동할 개수, 즉 한번에 2개씩 슬라이드되길 원하면 숫자 2를 전달한다.
- autoStart : 자동롤링에 대한 boolean 값. 자동롤링을 원하면 true를 자동롤링을 원치 않으면 false를 전달한다.
설명
예제1은 네번째 인자인 autoStart에 false를 전달하여 자동 롤링이 안되게 설정.

fn_rollToEx('slider2', 'photo', 1, false);

예제-1

설명
예제2는 네번째 인자인 autoStart에 true를 전달하여 자동 롤링이 되게 설정. 단 접근성을 위해 이미지나 버튼에 mouse를 over하면 자동롤링은 해제되고 mouse를 out하면 자동롤링이 다시 설정된다.

fn_rollToEx('slider2', 'photo', 1, true);

예제-2

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,stepNum,autoStart){

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

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

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

							if(arguments.length==4){
								el.data('autoStart', autoStart);
							}

							if(el.data('autoStart')){
								if(timer==0){
									timer = setInterval(moveNextSlide, speed);
									autoplay = true;
								}
							}

							el.bind({
								mouseenter:function(){
									if(!autoplay) return false;

									if(timer!=0 && el.data('autoStart')){
										clearInterval(timer);
										timer=0;
									}
								},
								mouseleave:function(){
									if(!autoplay) return false;

									if(timer==0 && el.data('autoStart')){
										timer = setInterval(moveNextSlide, speed);
									}
								}
							});


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

									if(timer!=0 && el.data('autoStart')){
										clearInterval(timer);
										timer=0;
									}
								},
								mouseleave:function(){
									if(!autoplay) return false;

									if(timer==0 && el.data('autoStart')){
										timer = setInterval(moveNextSlide, speed);
									}
								}
							});

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

									if(timer!=0 && el.data('autoStart')){
										clearInterval(timer);
										timer=0;
									}
								},
								mouseleave:function(){
									if(!autoplay) return false;

									if(timer==0 && el.data('autoStart')){
										timer = setInterval(moveNextSlide, speed);
									}
								}
							});

							el.data('play').bind({
								click:function(){
									if(timer==0 && el.data('autoStart')){
										timer = setInterval(moveNextSlide, speed);
										autoplay = true;
									}
								}
							});

							el.data('stop').bind({
								click:function(){
									if(timer!=0 && el.data('autoStart')){
										clearInterval(timer);
										timer=0;
										autoplay = false;
									}
								}
							});

							function movePrevSlide(){
								if(!el.data('animating')){
									//전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
									var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
									lastItem.prependTo(el);		//복사된 요소를 롤링객체의 앞에 붙여놓는다.
									el.children().eq(-(el.data('step')+1)).nextAll().remove();	//step개수만큼 선택된 요소를 끝에서 제거한다
									el.css('left','-'+(el.data('size')*el.data('step'))+'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')*el.data('step'))+'px'},'normal',function(){	//롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
										//전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
										var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
										firstChild.appendTo(el);	//복사된 요소를 롤링객체의 끝에 붙여놓는다.
										el.children().filter(':lt('+el.data('step')+')').remove();	//step개수만큼 선택된 요소를 앞에서 제거한다
										el.css('left','0px');	////롤링객체의 left위치값을 재설정한다.

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

						}
					</script>
				
설명
예제3은 세번째 인자인 stepNum에 3을 전달하여 슬라이드될 때 이미지가 3개씩 슬라이드 되며 네번째 인자인 autoStart에 true를 전달하여 자동 롤링이 되게 설정한다.
또한 접근성을 위해 직관적으로 재생/정지 버튼을 제공하여 '정지' 버튼을 클릭하면 자동롤링이 해제되고 '재생' 버튼을 클릭하면 자동롤링이 다시 설정된다.

fn_rollToEx('slider3', 'lifestyle', 'control', 3, true);

예제-3

HTML

					
  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

CSS

					<style type="text/css">
						#slider3 {position:relative; display:inline-block; width:740px; height:473px; margin-left:15px;}
						#slider3 a#left {position:absolute; left:20px; top:200px; z-index:20;}
						#slider3 a#right {position:absolute; right:20px; top:200px; z-index:20;}
						#slider3 .top-visu {position:relative; width:738px; height:450px; overflow:hidden;}
							#slider3 .top-visu ul.life-style {position:absolute; left:0px; top:0px;}
							#slider3 .top-visu ul.life-style:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
								#slider3 .top-visu ul.life-style li {position:relative; float:left; width:246px;}
						#slider3 #control {text-align:center;}
					</style>
				

Javascript

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

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

							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.data('step', stepNum);								//매개변수로 받은 step을 저장한다.
							el.data('autoStart', false);								//매개변수로 받은 step을 저장한다.
							el.data('play', null);
							el.data('stop', null);

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

							if(arguments[4]==true){
								el.data('autoStart', autoStart);
							}

							if(arguments[2]!= undefined){
								el.data('play', $('#'+controlID).find('.bStart'));
								el.data('stop', $('#'+controlID).find('.bStop'));
							}

							if(el.data('autoStart')){
								if(timer==0){
									timer = setInterval(moveNextSlide, speed);
									autoplay = true;
								}
							}

							el.bind({
								mouseenter:function(){
									if(!autoplay) return false;

									if(timer!=0 && el.data('autoStart')){
										clearInterval(timer);
										timer=0;
									}
								},
								mouseleave:function(){
									if(!autoplay) return false;

									if(timer==0 && el.data('autoStart')){
										timer = setInterval(moveNextSlide, speed);
									}
								}
							});


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

									if(timer!=0 && el.data('autoStart')){
										clearInterval(timer);
										timer=0;
									}
								},
								mouseleave:function(){
									if(!autoplay) return false;

									if(timer==0 && el.data('autoStart')){
										timer = setInterval(moveNextSlide, speed);
									}
								}
							});

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

									if(timer!=0 && el.data('autoStart')){
										clearInterval(timer);
										timer=0;
									}
								},
								mouseleave:function(){
									if(!autoplay) return false;

									if(timer==0 && el.data('autoStart')){
										timer = setInterval(moveNextSlide, speed);
									}
								}
							});

							if(arguments[4]!= undefined){
								el.data('play').bind({
									click:function(){
										if(timer==0 && el.data('autoStart')){
											timer = setInterval(moveNextSlide, speed);
											autoplay = true;
										}
									}
								});

								el.data('stop').bind({
									click:function(){
										if(timer!=0 && el.data('autoStart')){
											clearInterval(timer);
											timer=0;
											autoplay = false;
										}
									}
								});
							}

							function movePrevSlide(){
								if(!el.data('animating')){
									//전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
									var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
									lastItem.prependTo(el);		//복사된 요소를 롤링객체의 앞에 붙여놓는다.
									el.children().eq(-(el.data('step')+1)).nextAll().remove();	//step개수만큼 선택된 요소를 끝에서 제거한다
									el.css('left','-'+(el.data('size')*el.data('step'))+'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')*el.data('step'))+'px'},'normal',function(){	//롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
										//전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
										var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
										firstChild.appendTo(el);	//복사된 요소를 롤링객체의 끝에 붙여놓는다.
										el.children().filter(':lt('+el.data('step')+')').remove();	//step개수만큼 선택된 요소를 앞에서 제거한다
										el.css('left','0px');	////롤링객체의 left위치값을 재설정한다.

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

						}
					</script>