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

「爱情、让人受尽委屈。」 2022-09-02 00:51 158阅读 0赞

# 问题描述 #

原生大屏中有多个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)
        })
    }

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