<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="data:images/lef1.png" width="26" class="ll">

                </span>

                <span class="right-btn-r">

                    <img src="data: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');

            }

        }