jquery轮播

<style>
    *{margin:0;padding:0;}
     #banner{
         width:1200px;
         margin:0 auto;
         overflow: hidden;
         position:relative;
     }
     #ul-imgs{
         overflow: hidden;
     }
     .transition{  /*js中动态添加过度效果*/
        transition: all .5s linear;
     }
     #ul-imgs img{
         width:1200px;
     }
     /* 公共样式 */
     ul{
         list-style: none;
         display: flex;
     }
     /* 小圆点 */
     #ul-idxs{
        position: absolute;
        bottom:20px;
        left: 550px;
     }
     #ul-idxs>li{
        margin:0 10px;
        width:20px;
        height:20px;
        border:1px solid #FFF;
        border-radius:50%;
     }
     .active{
        background-color: #FFF;
     }
     /* 左右轮播按钮 */
     #btn-left,#btn-right{
        width:60px;
        height:100%;
        position: absolute;
        top:0;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
     }
     #btn-left{
        left:20px;
        background-image: url(image/left_ar.png)
     }
     #btn-right{
        right:20px;
        background-image: url(image/right_ar.png)
     }
</style>

<div id="banner">
        <div id="btn-left"></div>
        <ul id="ul-imgs" style="margin-left:0px;">
          <li><a href="javascript:;"><img src="image/carousel-1.jpg"></a></li>
          <li><a href="javascript:;"><img src="image/carousel-2.jpg"></a></li>
          <li><a href="javascript:;"><img src="image/carousel-3.jpg"></a></li>
          <li><a href="javascript:;"><img src="image/carousel-4.jpg"></a></li>
        </ul>
        <ul id="ul-idxs">
          <!--虽然li个数比实际图片张数多1，但小圆点的个数不必多1-->
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div id="btn-right"></div>
      </div>
    </div>

<script src="js/jquery.min.js"></script>
    <script>
        var $ul=$("#ul-imgs");
        var $ulIdxs=$("#ul-idxs");
        var $lis=$("#ul-idxs>li");
        var $banner=$("#banner");
        var $left=$("#btn-left");
        var $right=$("#btn-right");
        var n=0;//显示图片的下标
        //第一步，先自动轮播(ppt)
        function moveTo(to){
            if(to===undefined){ //自动播放是没有参数的
                n++;
            }else if(to==-1){  //点击左按钮传参是-1
                n--;
            }else if(to==-2){  //点击有按钮传参是-2
                n++;
            }else{              //其他情况传进来的参数是点击小圆按钮传进来的
                n=to;
            }
            if(n>=4){            //轮播四张图片，length是4,最大下标是3
                n=0;
            }else if(n<0){
                n=4;
            }
            var moveTo=-n*1200+"px";
            //为了解决轮播最后一张时 轮播图片倒退的样式，动态添加和溢出过度样式
            if(n!=0){
                $ul.addClass("transition")
            }else{
                $ul.removeClass("transition")
            }
            $ul.css("margin-left",moveTo);
            active();
        }
        //第二步，对应的小圆点active
        function active(){
            for(var key in $lis){
                if(key==n){
                    $lis[key].className="active";  //$lis[key]是DOM对象
                }else{
                    $lis[key].className="";
                }
            }
        }
        var timer=setInterval(function(){
            moveTo();
        },2000)
        //第三步，鼠标进入悬停
        $banner.mouseover(function(){
            clearInterval(timer);
        })
        //第四步，鼠标离开轮播
        $banner.mouseout(function(){
            timer=setInterval(function(){
            //函数的顺序略有影响
                moveTo();
            },2000)
        })
        //第五步，点击小圆点跳转到对应的图片
        $ulIdxs.click(function(e){
            var li=e.target;
            var to="";
            for(var key in $lis){
                if(li==$lis[key]){
                    to=k
                    ey;
                }
            }
            moveTo(to);
        })
        //第六步，左右btn事件
        $left.click(function(){
            moveTo(-1);  //-1左移
        });
        $right.click(function(){
            moveTo(-2);  //-2右移
        })

    </script>