【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(); })

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

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

猜你喜欢