layui一个页面多个轮播不同时切换问题

问题描述

原生大屏中有多个layui轮播，当移入一个轮播之后加载顺序不一致，会出现移入暂停的轮播掉队的情况，这里我解决的是如何移出后依旧同时切换tab

参考代码

$(".layui-carousel:nth-child(1)").hover(function(){
},function(){
	//鼠标移出同时重加载
    reload.map(function(v,i,a){
    	//layui文档中的ins.reaload（）方法啊
        v.reload()
    })
})
//ins数组，重加载队列
var reload = []
//放到一个方法中实现同时加载
function allround(startNb){
	//不是10的整数不进行轮播渲染，可忽略不看
    if(startNb%10!==0||startNb<0){
        return;
    }
    //10个轮播
    layui.use('carousel', function () {
        ins = null;
        var carousel = layui.carousel;
          ins =   carousel.render({
            elem: ".kuaidiandiv",
            width: "100%",
            height: "2.375rem",
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        //将ins放到重加载队列中
        reload.push(ins)
    })
//后面类似，没必要看
    layui.use('carousel', function () {
        ins = null;
        var carousel = layui.carousel;
          ins = carousel.render({
            elem: ".mendiannum",
            width: "100%",
            height: "2.375rem",
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins = null;
        var carousel = layui.carousel;
          ins = carousel.render({
            elem: ".qwjftable",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins =null;
        var carousel = layui.carousel;
        var ins=carousel.render({
            elem: ".whyytable",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins =null;
        var carousel = layui.carousel;
        var  ins =carousel.render({
            elem: ".qjyxtable",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins =null;
        var carousel = layui.carousel;
        var ins=  carousel.render({
            elem: ".jfyxtable",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins =null;
        var carousel = layui.carousel;
        var ins =carousel.render({
            elem: ".tabtiao",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins =null;
        var carousel = layui.carousel;
        var ins = carousel.render({
            elem: ".ywfctoptable",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins =null;
        var carousel = layui.carousel;
        var ins =carousel.render({
            elem: ".ywfctoptable2",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
    layui.use('carousel', function () {
        ins =null;
        var carousel = layui.carousel;
        var ins =carousel.render({
            elem: ".jrmsbtable",
            width: "100%",
            height: "2.375rem",
            autoplay: true,
            interval: 4000,
            indicator: 'none',
            arrow: 'none',
            anim: 'updown'
        })
        reload.push(ins)
    })
}

仅供参考，有帮助求点个赞再走