自己写的轮播图，用隐藏写的，但左右两个按钮不知道怎么和分页器图片同步 - 编程论坛

小白一个，左右两个按钮不知道怎么同步，网上教程的都是用推动。加超过范围隐藏。但我还是想先搞懂用隐藏消失做

<script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
    ul {
        list-style: none;
    }

    .box {
        width: 346px;
        height: 300px;
        overflow: hidden;
        position: relative;
    }

    .box_img {
        width: 346px;
        height: 250px;
        overflow: hidden;
    }

    .box_img ul li {
        display: none;
    }

    .box_img a {
        display: block;
        width: 346px;
        height: 250px;
    }

    .box_xb {
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 346px
    }

    .box_xb a {
        display: inline-block;
        padding: 2px 10px;
        font-size: 10px;
        background: #fff;
        margin: 0 5px;
        color: #000;
    }

    .box_xb a.active {
        background: red;
        color: #000;
    }

    .box-anniu a {
        display: block;
        width: 20px;
        height: 20px;
        background: red;
    }

    #left {
        position: absolute;
        left: 0;
    }

    #right {
        position: absolute;
        right: 0;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box_img">
            <ul>
                <li><a href="#" style="background: #f90;"></a></li>
                <li><a href="#" style="background: #f09;"></a></li>
                <li><a href="#" style="background: #0f9;"></a></li>
                <li><a href="#" style="background: #90f;"></a></li>
                <li><a href="#" style="background: #09f;"></a></li>
                <li><a href="#" style="background: #f90;"></a></li>
                <li><a href="#" style="background: #f09;"></a></li>
                <li><a href="#" style="background: #0f9;"></a></li>
                <li><a href="#" style="background: #90f;"></a></li>
            </ul>
        </div>
        <div class="box_xb"></div>
        <div class="box-anniu">
            <a href="javascript:" class="left" id="left"></a>
            <a href="javascript:" class="right" id="right"></a>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        var len = $(".box_img ul li").length;
        var size = $('.box_img ul li').size();
        for (var i = 1; i <= size; i++) {
            $('.box_xb').append('<a href="javascript:(void)">' + i + '</a>')
        }
        $('.box_img li').eq(0).show();
        var n;
        $('.box_xb a').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            var index = $(this).index();
            n = index;
            $('.box_img li').eq(index).fadeIn().siblings().fadeOut();
        });
        // $('#left').click(function() {
        //     $('.box_img li').eq(0).show();
        //     var n;
        //     var index = $(".box_xb a").index();
        //     n = index;
        //     $('.box_img li').eq(index-1).fadeIn().siblings().fadeOut();
        // });

    });
    </script>