<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>\n‘ + ‘ <img src="../upload/‘+n.picUrl+‘" style="width: 600px;height: 320px;">\n‘ + ‘ </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()这个方法,这个是重置轮播图用的!!
原文地址:https://www.cnblogs.com/foreversword/p/12627899.html
时间: 2024-11-02 14:02:58