通過jquery的animate實現可以左右點擊的輪播

html代碼：

<div id="all">
    <ul class="banner">
        <li><img src="img/pic1.jpg"/></li>
        <li><img src="img/pic2.jpg"/></li>
        <li><img src="img/pic3.jpg"/></li>
    </ul>
    <span class="btn-prev">></span>
    <span class="btn-next"><</span>
</div>

css代碼：

            *{
                margin: 0;
                padding: 0;
            }
            #all{
                width: 520px;
                height: 280px;
                overflow: hidden;
                position: relative;
            }
            .banner{
                list-style:none;
                width: 1560px;
                height: 280px;
            }
            .banner>li{
                width: 520px;
                float: left;
            }
            #all span{
                display: block;
                width: 30px;
                height: 40px;
                cursor: pointer;
                color: #fff;
                font-size: 30px;
                text-align: center;
                line-height: 40px;
                background: rgba(0,0,0,.5);
                position: absolute;
                top: 50%;
                margin-top: -15px;
            }
            #all span.btn-prev{
                right: 0;
            }

js代碼：

$(function(){
            var i;
            function move(){
                $(".banner").animate({"margin-left":"-520px"},function(){  
                    $(".banner").css("margin-left","0px");
                    $(".banner").append($(".banner li").eq(0));

                })
            }
            i=setInterval(move,2000);
            /*鼠標懸浮事件*/
            $("#all").hover(function(){
                clearInterval(i);
            },
            function(){
                i=setInterval(move,2000);
            });
            /*按鈕 下一個*/
            $(".btn-next").on("click",function(){
                $(".banner").animate({"margin-left":"-520px"},function(){
                    $(".banner").append($("li").eq(0));
                    $(".banner").css("margin-left","0px");
                })
            })
            /*按鈕上一個*/
            $(".btn-prev").on("click",function(){
                $(".banner").prepend($(".banner li:last"));
                $(".banner").css("margin-left","-520px");
                $(".banner").animate({"margin-left":"0px"},function(){ 

                })
            })
        })