탭 메뉴/배너 롤링

<script type="text/javascript">
<!--
var cnum=1;
function contabroll(num){
var knum;
if(num){
knum = num;
cnum = num;
} else {
knum = cnum;
}

var con = document.getElementById('contabroll').getElementsByTagName('dt');
var tab = document.getElementById('contabroll').getElementsByTagName('dd');

for(i=1;i<=con.length;i++){
con[i-1].className = (knum==i)? 'on' : '';
tab[i-1].className = (knum==i)? 'on' : '';
}
cnum++;
if(cnum>con.length) cnum = 1;
}

function contabrolling(type){
(type=='start')? ctr = setInterval(contabroll,2000) : clearTimeout(ctr);
}
//-->
</script>
<style type="text/css">
dl { float: left; }
dt { display: none; width: 283px; height: 100px; border: 1px solid red; margin-bottom: 10px; }
dt.on { display: block; }
dd { float: left; width: 50px; margin: 0 -1px 0 0; padding: 10px; border: 1px solid blue; text-align: center; }
dd.on { background: blue; font-weight: bold; color: #fff; }
</style>
<dl id="contabroll" -nmouseover="contabrolling('stop');" -nmouseout="contabrolling('start');">
<dt>tab 내용 1</dt>
<dt>tab 내용 2</dt>
<dt>tab 내용 3</dt>
<dt>tab 내용 4</dt>

<dd onclick="contabroll(1);">tab1</dd>
<dd onclick="contabroll(2);">tab2</dd>
<dd onclick="contabroll(3);">tab3</dd>
<dd onclick="contabroll(4);">tab4</dd>
</dl>
<script type="text/javascript">
<!--
contabroll(1);
contabrolling('start');
//-->
</script>