UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
자동롤링

설명
예제-1은 이미지를 자동롤링하며 롤링되는 이미지에 따라 버튼도 활성화된다. 이미지나 버튼에 마우스를 오버하면 접근성을 위해 자동롤링은 정지되고 클릭되는 버튼에 대응하는 이미지를 슬라이드하여 보여준다. 다시 마우스를 아웃하면 이미지는 자동롤링을 시작한다.

예제-1 [이미지 자동 롤링]

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;
						var speed = 2000;
						var timer = null;
						var auto = true;
						var cnt = 1;

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

						if(auto) timer = setInterval(autoSlide, speed);

						$list.children().bind({
							'mouseenter': function(){
								if(!auto) return false;
								clearInterval(timer);
								auto = false;
							},
							'mouseleave': function(){
								timer = setInterval(autoSlide, speed);
								auto = true;
							}
						})

						$('.bt-roll').children().bind({
							'click': function(){
								var idx = $('.bt-roll').children().index(this);
								cnt = idx;
								autoSlide();
								return false;
							},
							'mouseenter': function(){
								if(!auto) return false;
								clearInterval(timer);
								auto = false;
							},
							'mouseleave': function(){
								timer = setInterval(autoSlide, speed);
								auto = true;
							}
						});		

						function autoSlide(){
							if(cnt>len-1){
								cnt = 0;
							}

							$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 = $('.bt-roll').children().find('img').attr('src').replace('.png','_.png');
							$('.bt-roll').children().eq(cnt).find('img').attr('src',source);

							cnt++;
						}
					</script>