简单的焦点图轮播图

<div id="box">
    <ul id="list">
        <li><a href="###"><img src="images/pro_01.jpg"/></a></li>
        <li><a href="###"><img src="images/pro_02.jpg"/></a></li>
        <li><a href="###"><img src="images/pro_03.jpg"/></a></li>
        <li><a href="###"><img src="images/pro_04.png"/></a></li>
    </ul>
    <ul id="num">
        <li class="active">1</li>
        <li>2</li>                                   <li>3</li>                                             <li>4</li>
    </ul>
</div>

var t=n=0,count;
$(function(){
    count=$("#list li").length; 
    $("#num li").each(function(){
        $(this).click(function(){
            var i = $(this).text() - 1
            n = i; 
            if (i >= count) return;
            $("#list li").eq(i).fadeIn("slow").siblings("li").fadeOut("slow");
            $(this).addClass("active").siblings("li").removeClass("active");
        });
    });
    t = setInterval("showAuto()", 4000); 
    $("#list li").hover(function(){
            clearInterval(t)
    }, function(){
            t = setInterval("showAuto()", 4000);
    }); 
})
function showAuto() { 
      n = n >=(count - 1) ? 0 : ++n; 
      $("#num li").eq(n).trigger('click'); 
}