自动改变方向的幻灯片效果

  

<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;
            var onOff = true;


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


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


            // 自动切换  根据开关来控制 num的 ++ 或者 --
            function autoplay() {
                timer = setInterval(function () {                                             
                    num <= 0 && (num = 0, onOff = true);    
                    num >= aSpan.length - 1 && (num = aSpan.length - 1, onOff = false);
                    onOff ? num++ : num--;             
                    aSpan.removeClass("active");
                    oUl.animate({ "top": -(172 * num) }, 200);
                    aSpan.eq(num).addClass("active");
                }, 1000);
            };
            autoplay();
        };


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