码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-04-03 18:33:55      阅读:439      评论:0      收藏:0      [点我收藏+]

标签:str   exp   var   else   框架   color   ESS   view   init   

<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()这个方法,这个是重置轮播图用的!!

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

标签:str   exp   var   else   框架   color   ESS   view   init   

原文地址:https://www.cnblogs.com/foreversword/p/12627899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!