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();

        });