[jQuery] 자동 롤링 탭

시간 따라 자동으로 클래스 부여하는 방법

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="piece">
	<h2>리스트(ul) tabonoff</h2>
	<!-- //탭(ul) onoff -->
	<style type="text/css">
		.tab_menu {display:table;width:100%;border:1px solid #ccc;}
		.tab_menu li {display:table-cell;border-left:1px solid #ccc;text-align:center}
		.tab_menu li:first-child {border-left:0 none}
		.tab_menu .tit {display:block;padding:5px;color:#888;background-color:#ededed;cursor:pointer}
		.tab_menu .on .tit {color:#fff;background-color:#27b600}
		.tab_cont {padding:5px;margin-top:5px;border:1px solid #d5d5d5;border-radius:5px}
	</style>
	<div class="jq_tabonoff">
		<ul class="jq_tab tab_menu">
			<li><strong class="tit">menu1</strong></li>
			<li><strong class="tit">menu2</strong></li>
			<li><strong class="tit">menu3</strong></li>
			<li><strong class="tit">menu4</strong></li>
		</ul>
		<div class="jq_cont tab_cont">
			<div class="cont">content1<br>content1<br>content1<br>content1<br>content1<br></div>
			<div class="cont">content2<br>content2<br>content2<br>content2<br>content2<br>content2<br>content2<br>content2<br></div>
			<div class="cont">content3<br>content3<br>content3<br></div>
			<div class="cont">content4<br>content4<br>content4<br>content4<br>content4<br>content4<br>content4<br>content4<br>content4<br>content4<br>content4<br></div>
		</div>
	</div>
	<!-- 탭(ul) onoff// -->
</div>




<div class="piece">
	<h2>리스트(ul) tabonoff(auto)</h2>
	<!-- //탭(ul) tabonoff(auto) -->
	<style type="text/css">
		.tab_menu {display:table;width:100%;border:1px solid #ccc;}
		.tab_menu li {display:table-cell;border-left:1px solid #ccc;text-align:center}
		.tab_menu li:first-child {border-left:0 none}
		.tab_menu .tit {display:block;padding:5px;color:#888;background-color:#ededed;cursor:pointer}
		.tab_menu .on .tit {color:#fff;background-color:#27b600}
		.tab_cont {padding:5px;margin-top:5px;border:1px solid #d5d5d5;border-radius:5px}
	</style>
	<div class="jq_tabonoff_auto">
		<ul...

CSS

/* reset */
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
	fieldset,img {border:0 none}
	dl,ul,ol,menu,li {list-style:none}
	blockquote, q {quotes:none}
	blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
	input,select,textarea,button {vertical-align:middle}
	button {border:0 none;background-color:transparent;cursor:pointer}
	body {background:#333;}
	body,th,td,input,select,textarea,button {font-size:12px;line-height:1.5;font-family:'Malgun Gothic','맑은 고딕',sans-serif;color:#000}
	a {color:#000;text-decoration:none}
	address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
	table {border-collapse:collapse;border-spacing:0}
	img {vertical-align:top}
	.piece {min-width:300px;max-width:600px;padding:10px;margin:10px;background:#fff;}

JavaScript

$(document).ready (function () {
		$('.jq_onoff .jq_hide').css('display', 'none');
		$('.jq_autoonoff .jq_hide').css('display', 'none');

		//탭(ul) onoff
		$('.jq_tabonoff .jq_cont').children().css('display', 'none');
		$('.jq_tabonoff .jq_cont div:first-child').css('display', 'block');
		$('.jq_tabonoff .jq_tab li:first-child').addClass('on');
		$('.jq_tabonoff').delegate('.jq_tab li', 'click', function() {
			var index = $('.jq_tabonoff .jq_tab li').index(this);
			$(this).siblings().removeClass();
			$(this).addClass('on');
			$(this).parent().next('.jq_cont').children().slideUp('fast').eq(index).slideDown('fast');
		});

		//탭(ul) onoff(auto)
		$('.jq_tabonoff_auto .jq_cont').children().css('display', 'none');
		$('.jq_tabonoff_auto .jq_cont div:first-child').css('display', 'block');
		$('.jq_tabonoff_auto .jq_tab li:first-child').addClass('on');
		function tabonoff(o) {
			var index = $('.jq_tabonoff_auto .jq_tab li').index(o);
			$(o).siblings().removeClass();
			$(o).addClass('on');
			$(o).parent().next('.jq_cont').children().slideUp('fast').eq(index).slideDown('fast');
		}
		(function(a){
			a.fn.tabonoff_auto=function(p){
				var s_t_i=p&&p.scroller_time_interval?p.scroller_time_interval:"3000"; //롤링타임 수정가능
				var dom=a(this); 
				var s_length=dom.length; 
				var timer; 
				var current = 0; begin(); play();
				function begin(){
					dom.click(function(){current = dom.index($(this)); play(); stop()});
					dom.parent().parent().hover(function(){stop();},function(){timer = setTimeout(play,s_t_i);});
				}
				function stop(){clearTimeout(timer);}
				function play(){
					clearTimeout(timer); tabonoff(dom[current]);
					if(current >= s_length-1){current = 0;} else{current ++;}
					timer = setTimeout(play,s_t_i);
				}
			}
		})(jQuery);
		$(".jq_tabonoff_auto li").tabonoff_auto();
	});