UI Laboratory

UI 개발을 위한 레퍼런스

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

설명
예제1은 이미지 롤링중 가운데 이미지의 크기를 100%로 증가시키고 hidden 텍스트를 FadeIn 시키는 다이내믹 롤링이다.
fn_slideInfoToEx(containerID,objectID, autoStart)
- containerID : 롤링이미지와 버튼을 포함하고 있는 컨테이너 요소의 ID
- objectID : 롤링할 객체 ID
- autoStart : 자동롤링에 대한 boolean 값. 자동롤링을 원하면 true를 자동롤링을 원치 않으면 false를 전달한다.

예제-1

HTML

					

Prev
  • CLUB SK카드

    CLUB SK카드

    카드 하나로 SK의 모든 혜택을 누리다! SK 그룹 통합멤버십 이용, SK 텔레콤 통신요금 최대 월 15,000원 할인

  • T 멤버십 더블카드

    T 멤버십 더블카드

    영화/쇼핑/외식 등 160여 개 제휴사에서 T 멤버십 할인은 기본! 추가로 더블 혜택 제공!

  • 하나SK Touch 1 신용카드

    하나SK Touch 1 신용카드

    5대 주요 소비처 ( 주유/마트/학원/영화/외식 ) 에서 특별한 할인 혜택 서비스 영화/외식 관련 멤버십 더블할인 ( 최고 50% ) 까지!

  • 하나SK Touch T카드

    하나SK Touch T카드

    통신요금 매월 최대 13,000원 할인 1년 간 단말기 수리비 최대 10만원 지원, SKT 통신요금 부담을 확 줄인 통신 절약 카드

  • 하나SK Touch S Plus카드

    하나SK Touch S Plus카드

    최신 스마트폰을 부담없이! 통신요금 10%를 OK캐쉬백 적립, 매월 최대 25,000원 요금 할인

  • 하나SK Touch 7카드

    하나SK Touch 7카드

    SK 텔레콤과 하나SK카드의 즐거운 혜택이 한 곳에! 신규/기변 시 지원금도 받고, 매달 통신 요금 할인도 받고!

  • 모바일카드

    모바일카드

    스마트폰 모바일 쇼핑 전용카드 비밀번호 입력만으로 결제 OK

Next

CSS

					<style type="text/css">
						#slidesContainer {position:relative; width:757px; height:271px; margin:0 auto; padding:64px 59px 0 0px; }
						#slidesContainer p.bg-img {position:absolute; left:210px; top:0; z-index:20;}
						#slidesContainer a.prev-btn {position:absolute; top:111px; left:0; z-index:10;}
						#slidesContainer a.next-btn {position:absolute; top:111px; right:50px; z-index:10;}

						#slideshow {position:relative; width:765px; height:280px; margin-top:-30px; float:left; overflow:hidden; z-index:5;}
						ul#slide-card {position:absolute; left:0; top:30px; z-index:10; }
							ul#slide-card li {float:left; width:255px; text-align:center;}
							ul#slide-card li a img {width:70%;}
							ul#slide-card li p.card-name {margin-top:20px; font-size:14px; color:#333; font-weight:bold;}
							ul#slide-card li p.card-info {margin-top:20px; font-size:12px; color:#888;}
					</style>
				

Javascript

					<script type="text/javascript">
						fn_slideInfoToEx('slidesContainer', 'slide-card', false);

						function fn_slideInfoToEx(containerID,objectID, autoStart){

							var el = $('#'+containerID).find('#'+objectID);
							var lastChild;
							var speed = 3000;
							var timer = 0;
							var autoplay = false;

							el.data('prev', $('#'+containerID).find('#left'));	
							el.data('next', $('#'+containerID).find('#right'));	
							el.data('size', el.children().outerWidth());		
							el.data('len', el.children().length);				
							el.data('firstMove',false);
							el.data('animating',false);

							el.css('width',el.data('size')*el.data('len'));					

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

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

							lastChild = el.children().eq(-1).clone(true);
							lastChild.prependTo(el);
							el.children().eq(-1).remove();

							el.children().find('.card-info').hide();
							el.children().eq(2).find('.card-info').fadeIn('fast');
							el.children().eq(2).find('img.card').css({'width':'100%','margin-top':'-20px'});

							el.css('left','-'+el.data('size')+'px');

							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.data('prev').bind({
								click:function(){
									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.data('next').bind({
								click:function(){
									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);
									}
								}
							});

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

									el.children().find('img.card').animate({'width':'70%','margin-top':'0px'},'fast');
									el.children().find('.card-info').fadeOut('fast');
									el.children().eq(1).find('img.card').animate({'width':'100%','margin-top':'-20px'},'normal');
									el.children().eq(1).find('.card-info').fadeIn('fast');

									el.animate({'left': '0px'},'normal',function(){
										lastChild = el.children().filter(':last-child').clone(true);
										lastChild.prependTo(el);
										el.children().filter(':last-child').remove();
										el.css('left','-'+el.data('size')+'px');

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

								}

								return false;
							}

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

									el.data('animating',true);

									var firstChild = el.children().filter(':first-child').clone(true);
									firstChild.appendTo(el);
									el.children().filter(':first-child').remove();
									el.css('left','0px');

									el.children().find('img.card').animate({'width':'70%','margin-top':'0px'},'fast');
									el.children().find('.card-info').fadeOut('fast');
									el.children().eq(2).find('img.card').animate({'width':'100%','margin-top':'-20px'},'normal');
									el.children().eq(2).find('.card-info').fadeIn('fast');

									el.animate({'left':'-'+el.data('size')+'px'},'normal',function(){
										el.data('animating',false);
									});
								}

								return false;
							}
						}
					</script>