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

<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

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

layui 轮播图动态数据不显示问题

layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: '#test1', width: '100%', //设置容器宽度 height: '100%', arrow: 'always', //始终显示箭头 //,anim: 'updown' //切换动画方式 autoplay: false }); //重置轮播 ins.reload({ elem: '

小程序轮播图显示三个数据

//专家团队 getZhuanjia: function () { var that = this; app.util.request({ "url": "entry/wxapp/YuZhuanjia", success: function (res) { var big = res.data.data; var length = big.length; var num = parseInt(length / 3); var arr = []; for (var i

iOS轮播图的实现

//使用轮播图展示一组图片信息 //定时器  使循环 [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(runTimePage) userInfo:nil repeats:YES]; //初始化scrollview self.scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, 320, 200)]; self.scrol

Angular与bootstrap轮播图的结合使用

在做项目中碰到一处这样的bootstrap的轮播图的使用,数据要用angular动态绑定上去.公司logo图片,职位,公司名称 记录下做完后踩的坑. 1. 首先是使用bootstrap的轮播图示例代码进行改造 <div id="myCarousel" class="carousel slide" interval="false"//此次不需要自动轮播,添加此声明 data-pause="pause" //鼠标悬停后移出后

Vue实现音乐播放器(七):轮播图组件(二)

轮播图组件 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //这里的<slot></slot>插槽表示里面的内容可以由引用这个轮播图组件的推荐组件来插入 只需要在<slider></slider>标签里面插入内容

luffy-city 基础环境搭建(至轮播图前后台交互实现)-步骤目录

前后台基础环境搭建 以 luffy-city 的主页为例,打通了轮播图的前后台交互 前言:复习-luffy 项目技术点概括 pip 源配置 python 虚拟环境搭建 luffy 后台配置-项目创建-基本插件安装-目录重构-开发环境配置文件配置(dev.prod)-日志配置 luffy 后台配置-项目环境变量 配置-logger自定义封装与使用-异常模块封装-Response二次封装 创建数据库并分配用户权限 创建应用(app)与用户-配置 media 静态资源接口 vue 环境配置-项目创建-

swiper结合ajax的轮播图

Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合ajax使用,所以要先定义json文件 json: 定义好json文件后,在HTML页面中简单布局,如下图: *swiper-container代表swiper的容器 <div class="swiper-container"> *swiper-wrapper 代表触控的对象 &

自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现. 实现原理 1.除第一张图片外,其余图片全部隐藏,4张图片重叠起来. 2.导航按钮添加mouseover和mouseleave事件. 3.设置interval函数,启动定时器调用ShowImg函数. 4.动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属

JS 实现动态轮播图

JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出现在相框中,不在相框中的元素会被css中的 overflow : hidden 隐藏掉, 其次,图片是经过处理的 ,正好和我们的相关等宽等高! 动态的创建元素,下面我们会动态创建li,并通过css把它修饰成小按钮格式,其次给小按钮添加点击事件,鼠标经过,离开事件,动态的实现图片的移动, 其实就是根据