关于前端图片轮播问题

网上普遍的一种图片轮播方式我看见有用appendTo方式，每次将第一个图片放到最后，并将left设置为0，这种是可以实现的，若要图片无缝链接需要将ul的宽度设置很大，但这种方式轮播有个缺陷就是无法掌控轮播的顺序，当你添加按钮左右切换时会乱，所以轮播只需将i控制就可以了，设置left为-i*100px，i点击和轮播时变化。

 var s = setInterval(lb, 3000);
            function lb() {
               
                $("#lb ul").animate({
                    "margin-left": "-"+(i+1)*100+"%"
                }, function () {
                    
                    i++;
                    if (i == 4) {
                        i =0;
                    }
                    
                    xb.css("background-color", "chartreuse");
                    xb.eq(i).css("background-color", "white");
                    $("#lb ul li").eq(0).appendTo("#lb ul");
                    $("#lb ul").css("margin-left", "0");
                })