JQ 封装一个自动轮播图的方法

<div id="box">

           <ul>
               <li><img src="img/01.jpg"</li>
               <li><img src="img/02.jpg"</li>
               <li><img src="img/03.jpg"</li>
               <li><img src="img/04.jpg"</li>
               <li><img src="img/05.jpg"</li>
           </ul>
           <p>   
               <span class="active">1</span>
               <span>2</span>
               <span>3</span>
               <span>4</span>
               <span>5</span>
           </p>

       </div>

 // 封装一个slide方法  此时$(this)指向的是调用它的对象

        $.fn.slide = function () {
            var oUl = $(this).children("ul");     //children() 返回的仅仅是儿子辈，参数是选填项
            var aSpan = $(this).find("span");    // find()  返回的是所有的子孙辈，参数为必填项
            var num = 0;
            var timer = null;


            // 鼠标移动上去，图片切换
            aSpan.each(function (i) {
                $(this).mouseover(function () {
                    aSpan.removeClass("active");
                    $(this).addClass("active");
                    num = i;                     //当鼠标移上去的时候改变的是num的值，这样移开后计时器会按照这个num值继续走
                    oUl.css("top", -(172 * num));   //  图片的高度是172px
                });
            });


            // 鼠标移上去，计时器停止，移开继续；
            $(this).mouseover(function () {
                clearInterval(timer);
            }).mouseout(function () {
                autoplay();
            })


            // 自动切换
            function autoplay() {
                timer = setInterval(function () {
                    num++;
                    num %= aSpan.length;
                    aSpan.removeClass("active");
                    oUl.css("top", -(172 * num));
                    aSpan.eq(num).addClass("active");
                }, 1000);
            };
            autoplay();
        };


        $(function () {
            // 使用方法
            $("#box").slide();
        });