jQueryピクチャのマルチキャストのコード分離

以前、jQueryがリストの自動スクロールを実現することに遭遇したことがありますが、今回の画像は原理的に同じで、わずかな違いがあります.画像の右下に現在の画像のシーケンス番号を表示する必要があります.
 
htmlコード、および対応するcssコード:

<div id="scrollPics">

    <ul class="slider" >

        <li><img src="images/ads/1.gif"/></li>

        <li><img src="images/ads/2.gif"/></li>

        <li><img src="images/ads/3.gif"/></li>

        <li><img src="images/ads/4.gif"/></li>

        <li><img src="images/ads/5.gif"/></li>

    </ul>

    <ul class="num" >

        <li class="on">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

</div>

cssコード:

#scrollPics{

    height: 150px;

    width: 100%;

    margin-bottom: 10px;

    overflow: hidden;

    position:relative;

}

.num{

    position:absolute;

    right:5px;

    bottom:5px;

}

#scrollPics .num li{

    float: left;

    color: #FF7300;

    text-align: center;

    line-height: 16px;

    width: 16px;

    height: 16px;

    cursor: pointer;

    overflow: hidden;

    margin: 3px 1px;

    border: 1px solid #FF7300;

    background-color: #fff;

}

#scrollPics .num li.on{

    color: #fff;

    line-height: 21px;

    width: 21px;

    height: 21px;

    font-size: 16px;

    margin: 0 1px;

    border: 0;

    background-color: #FF7300;

    font-weight: bold;

}

絶対位置決めでリストnumの位置を設定し、liに関連スタイルを設定し、onは画像に対応する数値リストのliのスタイルカテゴリを表示します.
 
jsコード:

//    

    var len = $(".num > li").length;

    var index = 0;  //    

    var adTimer;

    $(".num li").mouseover(function() {

        index = $(".num li").index(this);  //       li  index

        showImg(index);

    }).eq(0).mouseover();

    //      ，      .

    $('#scrollPics').hover(function() {

        clearInterval(adTimer);

    }, function() {

        adTimer = setInterval(function() {

            showImg(index)

            index++;

            if (index == len) {       //        ，     

                index = 0;

            }

        }, 3000);

    }).trigger("mouseleave");



    function showImg(index) {

        var adHeight = $("#scrollPics>ul>li:first").height();

        $(".slider").stop(true, false).animate({

            "marginTop": -adHeight * index + "px"    //   marginTop            

        }, 1000);

        $(".num li").removeClass("on")

            .eq(index).addClass("on");

    }