js轮播的实现

<div class="school-list-ul">

            <ul class="js-repeat-comment-wrap" style="margin-top: -817.100677988105px;"><!-- 116*3 -->

                    <li class="">

                        <img width="64" height="64" src="/res/img/index/face/116.jpg" data-img-set="1" data-src="/res/img/index/face/116.jpg" class="js-item-img">

                        <p class="text">11111</p>

                        <p class="name">11同学 111</p>

                    </li>                                        

                    <li class="">

                        <img width="64" height="64" src="/res/img/index/face/116.jpg" data-img-set="1" data-src="/res/img/index/face/116.jpg" class="js-item-img">

                        <p class="text">11111</p>

                        <p class="name">11同学 111</p>

                    </li>

                   <li class="">

                        <img width="64" height="64" src="/res/img/index/face/116.jpg" data-img-set="1" data-src="/res/img/index/face/116.jpg" class="js-item-img">

                        <p class="text">11111</p>

                        <p class="name">11同学 111</p>

                    </li>

                    <li class="">

                        <img width="64" height="64" src="/res/img/index/face/116.jpg" data-img-set="1" data-src="/res/img/index/face/116.jpg" class="js-item-img">

                        <p class="text">11111</p>

                        <p class="name">11同学 111</p>

                    </li>                                        

                    <li class="">

                        <img width="64" height="64" src="/res/img/index/face/116.jpg" data-img-set="1" data-src="/res/img/index/face/116.jpg" class="js-item-img">

                        <p class="text">11111</p>

                        <p class="name">11同学 111</p>

                    </li>

                   <li class="">

                        <img width="64" height="64" src="/res/img/index/face/116.jpg" data-img-set="1" data-src="/res/img/index/face/116.jpg" class="js-item-img">

                        <p class="text">11111</p>

                        <p class="name">11同学 111</p>

                    </li>

          </ul>

 </div>

<!--div固定高度，当ul的高度大于div则可以满足类似轮播的效果的条件，为了实现全部li项的轮播，这里li的项的个数是实际的两倍-->

//js文件：

//轮播评论(文字)，含图像的处理

var renderCommenList = function (item-height,item-length) {

    var wrap_node = $(".js-repeat-comment-wrap"),

        img_node = wrap_node.find(".js-item-img"),       //图像的

        empty_img = null,

        total_size = wrap_node.find("li").length,          //轮播的项的个数

        real_size = total_size / 2,                        //实际的页面的展示需要的li的个数

        move_top = 1 * item-height,                                //每个轮播项(li)的高度

        half_size = -(real_size - 1) * move_top,           

        cur_magin_top = 0,                                 //当前的ul与div的marginTop值

        cur_size = 0;                                      //当前的li偏移项的个数

    if (total_size > 0) {

        var comment_timer_function = function () {

            cur_magin_top = parseInt(wrap_node.css("marginTop").replace("px", ""), 10);

            if (cur_magin_top < half_size) {

                wrap_node.css("marginTop", "0px");                 //重置ul与div之间的间距为0

                cur_size = 0;                                        //充值当前ul偏移div的个数为0

            } else {

                //懒惰加载图片

                empty_img = img_node.eq(cur_size + item-length);    //item-length为div固定区域块中可显示的子项<li>的个数，这里为3项

                if (empty_img.data('img-set') != 1) {

                    empty_img.attr('src', empty_img.data('src'));

                    empty_img.data('img-set', 1);                 //data-img-set=1用于标记当前的img已经加载

                }

                wrap_node.animate({                                //执行一个滚动动画

                    marginTop: '-' + cur_size * move_top + 'px'     //轮播偏移的子项的个数 * 每个轮播项高度

                }, 1500);

                cur_size++;

            }

        };

        setInterval(function () {

            comment_timer_function();

        }, 4000);

        comment_timer_function(); // runs it immediately

    }

}

var item-height = 117px,        //假设每个轮播项的高度为117px

    item-length = 3;            //item-length为固定容器内可显示的子项的个数

renderComentList(item-height,item-length);

效果：