【JS篇】控制子集超过一定数量开始轮播

【JS篇】控制子集超过一定数量开始轮播，

这个是很早的时候的一个效果了，经过代码的不断迭代升级修改，现在是最封装的一版本，通过面向对象传参数，适用于任何一个需要放置 数量达到一定条件后可执行的函数

// 团队成员大于6个人的时候滚动
        jQuery(document).ready(function () {
            var box0 = jQuery("#itemsd"), v0 = 1.5; //这里添加滚动的对象和其速率
            Rin(box0, v0);

            function Rin(jQueryBox, v) {//$Box移动的对象，v对象移动的速率
                var jQueryBox_ul = jQueryBox.find("ul"),
                    jQueryBox_li = jQueryBox_ul.find("li"),
                    jQueryBox_li_span = jQueryBox_li.find("span"),
                    left = 0,
                    s = 0,
                    timer;//定时器

                jQueryBox_li.each(function (index) {
                    jQuery(jQueryBox_li_span[index]).width(jQuery(this).width());//hover
                    s += jQuery(this).outerWidth(true); //即要滚动的长度
                })

                window.requestAnimationFrame = window.requestAnimationFrame || function (Tmove) { return setTimeout(Tmove, 1000 / 60) };
                window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;

                if (s >= jQueryBox.width()) {//如果滚动长度超出Box长度即开始滚动，没有的话就不执行滚动
                    jQueryBox_li.clone(true).appendTo(jQueryBox_ul);
                    Tmove();
                    function Tmove() {
                        //运动是移动left  从0到-s;（个人习惯往左滚）
                        left -= v;
                        if (left <= -s) { left = 0; jQueryBox_ul.css("left", left) } else { jQueryBox_ul.css("left", left) }
                        timer = requestAnimationFrame(Tmove);
                    }
                    jQueryBox_ul.hover(function () { cancelAnimationFrame(timer) }, function () { Tmove() })
                }

            }
            //团队成果大于两个时显示
            if (jQuery("#teamover>li").length > 2) {
                jQuery(".domainmore").eq(0).show();
                $("#teamover>li").filter(":lt(2)").show().end().filter().hide();
                    } else {
                        jQuery(".domainmore").eq(0).hide();
                    }
                })
                jQuery("#domore").click(function () {
                    $("#teamover>li").show();
                    jQuery(".domainmore").eq(0).hide();


        })

其中的轮播条件可根据实际情况，我给出的是宽度达到限定，也可以换成子集的数量达到限定后进行无缝滚动，
团队列表大于两个时显示 是用来处理显示更多与隐藏的按钮， 在数量未达条件时正常显示， 达到后显示【点击加载更多】的按钮， 点击后该按钮隐藏，显示所有团队列表。适用于任何场景，如果觉得方法还可再做优化的，欢迎道友指点交流。