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">1span>
             <span>2span>
             <span>3span>
             <span>4span>
         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>