通过layui轮播图展示ajax动态数据的问题

Posted 2020-11-27 foreversword

<div class="layui-carousel" id="carouselView">
    <div carousel-item="" id="preview">

    </div>
</div>

function initCarousel(){
    layui.use([‘carousel‘, ‘form‘], function(){
        var carousel = layui.carousel;
        $.ajax({
            url:‘GetCarouselServlet‘,
            type:‘post‘,
            data:{
                isDisplay:1
            },
            dataType:‘json‘,
            success:function (data) {
                $.each(data,function (i,n) {
                    var str = ‘<div>
‘ +
                        ‘         <img src="../upload/‘+n.picUrl+‘"  style="width: 600px;height: 320px;">
‘ +
                        ‘      </div>‘;
                    $(‘#preview‘).append(str);

                });
                //改变下时间间隔、动画类型、高度
                var ins = carousel.render({
                    elem: ‘#carouselView‘
                    ,interval: 2000
                    ,arrow: ‘always‘
                    ,anim: ‘default‘
                    ,width:‘600px‘
                    ,height:‘320px‘
                });
                ins.reload({
                    elem: ‘#carouselView‘
                    ,interval: 2000
                    ,arrow: ‘always‘
                    ,anim: ‘default‘
                    ,width:‘600px‘
                    ,height:‘320px‘
                });
            },
            error:function () {
                alert("数据库查询失败，请联系管理员！")
            }
        });
    });
}

initCarousel();

网上找了半天解决方法，也没搞明白，我想起layui框架在form表单渲染的时候在ajax里写过form.render(‘form‘)这样的代码

就想到把layui轮播图设置，放在加载数据后，在设置轮播图的属性，另外一定要加 ins.reload()这个方法，这个是重置轮播图用的！！