jquery小动画图片box,详细注释

这个例子才写过2次,这次只有个大概的思路,写起来竟然还要先看看前次是怎么写的.......我这学的.......

/// <reference path="jquery-1.8.3-vsdoc.js" />
$(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个数字上的样式.
    });
});