탭 내용과 같이 자동롤링

<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" onmouseover="contabrolling('stop');" onmouseout="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>