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);

效果：