jqueryの小さいアニメーションのピクチャーbox、詳しい注釈

この例は2回しか書いていませんが、今回は大まかな考えしかありません.私が学んだのは......

/// 
$(document).ready(function () {
    //    var lis = $("#images_box_ul").children("li");

    //    var numbers = $(".img_box_number").children("li");
    //    var image_counts = lis.length;
    //    var i = 0;
    //    var play;
    //    autoPlay();
    //    function autoPlay() {
    //        play = setInterval(function () {
    //            if (i == 0) { i = 1 }; //      , 1         2       .           ,    i 1,  2     .   1    
    //            if (i == image_counts) { i = 0 }; //              .     0,      
    //            $(".in_imgbox_li").removeClass("in_imgbox_li"); //         class,               
    //            lis.eq(i).addClass("in_imgbox_li"); //    eq  0  ,    1 .      ,                 
    //            $(".in_imgbox_number").removeClass("in_imgbox_number"); //         class,  
    //            numbers.eq(i).addClass("in_imgbox_number"); //   i       .
    //            i++; //  1
    //        }, 3000); //  3     
    //    }

    var lis = $("#images_box_ul").children("li");
    var numbers = $(".img_box_number").children("li");
    var visible_li = $("#images_box_ul li:visible");//         
    var image_counts = lis.length;
    var i = 0;
    var play;
    autoPlay();
    function autoPlay() {
        play = setInterval(function () {
            if (i == 0) { i = 1 }; //      , 1         2       .           ,    i 1,  2     .   1    
            if (i == image_counts) { i = 0 }; //              .     0,      
            visible_li.animate({ opacity: "0" }, 20); //200               opacity    0,                 
            lis.eq(i).animate({ opacity: "1" }, 200); //200         opacity    1,               
            $(".in_imgbox_number").removeClass("in_imgbox_number"); //         class,  
            numbers.eq(i).addClass("in_imgbox_number"); //   i       .
            i++; //  1
        }, 3000); //  3     
    }
    lis.mouseover(function () {
        clearInterval(play);
    }).mouseout(function () {
        autoPlay();
    });
    numbers.click(function () {//       
        clickNo = $(this).index(); //            
        $(".in_imgbox_li").removeClass("in_imgbox_li"); //         class,    
        lis.eq(clickNo).addClass("in_imgbox_li"); //    eq  0  ,    1 .      ,                 
        $(".in_imgbox_number").removeClass("in_imgbox_number"); //         class,  
        numbers.eq(clickNo).addClass("in_imgbox_number"); //   i       .
    });
});