<div class="banner" id="banner">
    <div class="list" id="list">
        <div id="list_img"></div>
        <a href="#" class="btnn left"></a>
        <a href="#" class="btnn right"></a>
        <div class="circe" id="tabs">
            <ul></ul>
        </div>
    </div>
</div>

 $(function(){
        var imgNum=6;
        for(var i=0;i<imgNum;i++) {
            $("#list_img").append('![](img/nav_0' + i + '.jpg)');
            $("#tabs ul").append('<li class="current" ><a href="javascript:;">'+(i-0+1)+'</a></li>')
        }
        $("#img1").show();
        $("#tabs li").eq(0).addClass("select")
        $("#list").mouseover(function(){
            $("#list>a").show();
            clearInterval(timer);
            timer=null;
        })
        $("#list").mouseout(function(){
            $("#list>a").hide();
            timer=setInterval(function(){
                fnRight();
            },1500);
        })
        //设置左移右移
        var page=1;
        const WIDTH=1200;
        const MAX=imgNum;
        function fnLeft(){
            if(page==1){
                page=MAX+1;
                $("#list_img").animate({left:-WIDTH*(page-2)},'slow');
                page--;
            }else{
                $("#list_img").animate({left:-WIDTH*(page-2)},'slow');
                page--;
            }
            $('.circe>ul').children('li').eq(page+1).addClass("select").siblings().removeClass("select");
        }
        function fnRight(){
            if(page==MAX){
                page=0;
                $("#list_img").animate({left:-WIDTH*page},'slow');
                page++;
            }else{
                $("#list_img").animate({left:-WIDTH*page},'slow');
                page++;
            }
            $('.circe>ul').children('li').eq(page+1).addClass("select").siblings().removeClass("select");
        }
        $(".circe li a").mouseover(function(){
            var index=$(this).parent("li").index();
            $("#list_img").animate({
                left:-WIDTH*index
            },'slow')
            $(this).parent("li").addClass("select").siblings().removeClass("select");
            page=index;
        })
        $("a.left").click(function(){
            fnLeft();
        })
        $("a.right").click(function(){
            fnRight();
        })
        //自动轮播
        timer=setInterval(function(){
            fnRight();
        },2000)

    })

   *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
            color:#000;
        }
        #list>#list_img>img{
            float: left;
        }
        #banner:before{
            content: '';
            display: table;
        }
        .banner{
            height: 500px;
            margin: 100px auto 0 -600px;
            position: relative;
            left:50%;
            width:1202px;
        }
        .list{
            overflow: hidden;
            width:1202px;
            height: 340px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .btnn{
            position: absolute;
            top: 100px;
            width: 50px;
            height: 140px;
            display: none;
        }
        .left{
            left: 0px;
            background: url("img/lun.png") no-repeat  ;
        }
        .right{
            left: 1150px;
            background: url("img/lun.png") no-repeat -50px 0px;
        }
        .left:hover{
            background-position: -153px 0px;
        }
        .right:hover{
            background-position: -101px 0px;
        }
        .current{
            float: left;
            list-style: none;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 50%;
            background:#999;
            cursor: pointer;
            font-size: 20px;
            text-align: center;
            margin: 2px 2px;
        }
        .select{
            background:#a3ff94;
        }
        .circe{
            position: absolute;
            left: 900px;
            bottom: 10px;
        }
        #list_img{
            width: 7612px;
            height: 342px;
            position: relative;
        }