jQuery實現漸變式輪播圖效果

<div class="menu">
     <div class="pic">
         <img src="images/1.jpg" />
         <img src="images/2.jpg" />
         <img src="images/3.jpg" />
         <img src="images/4.jpg" />
     </div>
     <div class="bt">
         <div class="right">
             <span class="on">1</span>
             <span>2</span>
             <span>3</span>
             <span>4</span>
         </div>
     </div>
   </div>

<style>
    .menu{ 
    width:478px; 
    height:286px;
    margin:50px auto; 
    overflow:hidden; 
    position:relative; 
}
.pic{ 
    width:478px; 
    height:268px;
}
.pic img{ 
    display:block; 
    display:none;
}
.pic img:nth-child(1){ display:block;}

.bt{ 
    width:100%; 
    height:30px; 
    position:absolute; 
    bottom:-40px;  
    left:0px;
    background:rgba(51,51,51,0.5); 
    transition:all 0.3s ease 0.1s;}

.bt span{ 
    width:30px; 
    height:30px; 
    float:left; 
    display:block; 
    background:#000; 
    color:#FFF; 
    text-align:center; 
    line-height:30px; 
    border-radius:50%; 
    margin-right:8px; 
    cursor:pointer;}
.bt .right{ 
    float:right;
}
.bt span.on{ 
    background:#F00;
}
</style>

<script type="text/javascript">
        var num = 0;
        var spns = $("span");
        $(function() {

            //當鼠標移至menu上時讓彈窗顯示
            $(".menu").mouseover(function() {
                $(".bt").css("bottom", 0);
            });
            //當鼠標移至menu上時讓彈窗消失
            $(".menu").mouseleave(function() {
                $(".bt").css("bottom", "-40px");
            });
            //當鼠標懸浮至span上時，停止計時器並獲取當前位置下標
            $(".bt .right span").mouseover(function() {
                clearInterval(timer);
                var n = $(this).index(); //獲取當前下標並賦值給n
                fx(n);
            })
            //當鼠標離開時 啓動定時器
            $("span").mouseleave(function() {
                timer = setInterval(fun, 3000);
            })

            function fx(n) {
                //這裏提供兩種實現方式
                $("span").removeClass("on").eq(n).addClass("on");
                $(".pic img:visible").stop(true).fadeOut(500);
                $(".pic img").eq(n).stop(true).fadeIn(1000);

                // $("span").eq(n).addClass("on").siblings().removeClass("on")
                // $("img").eq(n).fadeIn(500).siblings().fadeOut(500)
            }

            var timer = setInterval(fun, 2000);
            // alert(spns.length)
            function fun() {
                num++;
                console.log(num);
                if (num == spns.length) {
                    num = 0
                };
                fx(num);
            }

        })
    </script>