手写无缝轮播banner

<div class="banner">
        <ul class="clearfloat bannerul xin" id="xin">
            <!-- <li><img src="img/nbaner.png" /></li>
            <li><img src="img/nbaner.png" /></li>
            <li><img src="img/nbaner.png" /></li>
            <li><img src="img/nbaner.png" /></li> -->
        </ul>
        <ul class="num clearfloat">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div>
            <!-- <button class="ll" type="button">Click Me l!</button>
                <button class="rr" type="button">Click Me r!</button> -->
            <!-- <span class="left-btn-l">
                    <img src="images/lef1.png" width="26" class="ll">
                </span>
                <span class="right-btn-r">
                    <img src="images/rig1.png" width="26" class="rr">
                </span> -->
        </div>
    </div>

Page.prototype.banner = function (data) {
            var that = this;
            var banners = $('.banner');
            var bannerul = $('.bannerul');
            var bannerulli = $('.bannerul li')
            var widths = banners.width();
            var lengths = bannerulli.length;
            var sid = null;
            var index = 0;
            bannerulli.width(widths)
            var bgc = []
            for (var i = 0; i < data.length; i++) {
                var tt = {};
                tt.background = data[i].background;
                bgc.push(tt);
            }
            banners.css(bgc[0]);
            function play() {
                index++;
                if (index == lengths) {
                    index = 0;
                    banners.css(bgc[index]);
                }
                banners.css(bgc[index]);
                core(index);
            }
            sid = setInterval(play, 5000);
            banners.hover(function () {
                clearInterval(sid)
            }, function () {
                sid = setInterval(play,  5000);
            });

            $(".num li").on('click', function () {
                index = $(this).index();
                banners.css(bgc[index]);
                core(index);
            });

            function core(index) {
                
                $('.bannerul').append($('.bannerul li').eq(0).clone());//copy第一张添加在最后
                bannerul.stop().animate({
                    'left': -(bannerulli.eq(0).innerWidth())
                }, 1000,"linear",function(){
                    $('.bannerul li').eq(0).remove();//执行完删除第一个图片
                    bannerul.css({"left":"0px"});//初始化left值
                });
                $('.num li').eq(index).addClass('active').siblings().removeClass('active');
               
            }
        }

原理参考：https://www.cnblogs.com/zbblog/p/12053666.html 

思路：不断copy第一张图片添加到最后。同时向左移动一定值。在执行动画结束回调执行remove首张图片。以此作为循环。