$$.ajax({
url:'http://localhost:8080/api/v1/food/listFeatureFood',
type:'Get',
xhrFields: {withCredentials: true},
crossDomain: true,
data:{'foodTakeoutState':0,'foodTop':3},
success:function(result){
var length = result.value.length;
if(length == 1) {
console.log(result.value[0].foodImg)
$$('.topImg').append(
'<div class="mui-slider-item">'+
'<a href="#">'+
'<img src="'+result.value[0].foodImg+'">'+
'</a>'+
'</div>'
);
} else {
$$('.topImg').append(
//<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
'<div class="mui-slider-item mui-slider-item-duplicate">'+
'<a href="#">'+
'<img src="'+result.value[length-1].foodImg+'" >'+
'</a>'+
'</div>'
);
$$('.topImgActive').append(
'<div class="mui-indicator mui-active"></div>'
);
for(var i = 0; i < length; i++) {
$$(".topImg").append(
'<div class="mui-slider-item">'+
'<a href="#">'+
'<img src="'+result.value[i].foodImg+'">'+
'</a>'+
'</div>'
);
}
$$('.topImg').append(
//<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
'<div class="mui-slider-item mui-slider-item-duplicate">'+
'<a href="#">'+
'<img src="'+result.value[0].foodImg+'" >'+
'</a>'+
'</div>'
);
for(var i = 0; i < length - 1; i++) {
$$('.topImgActive').append('<div class="mui-indicator"></div>');
}
}
//需要重新加载轮播组件
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval: 5000 //自动轮播周期,若为0则不自动播放,默认为0;
});
}
});

MUI动态生成轮播图片的更多相关文章

  1. APP动态加载轮播图片

    如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...

  2. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  3. HTML练习二--动态加载轮播图片

    接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...

  4. mui 动态加载数据出现的问题处理 (silder )

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  5. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  6. JS 实现动态轮播图

    JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...

  7. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  8. Unty3D动态加载图片

    试验动态加载图片,代码如下: using UnityEngine; using System.Collections; public class DynamicLoad : MonoBehaviour ...

  9. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

随机推荐

  1. [Linux] umask 从三类人群的权限中拿走权限数字

      作用   umask 用来设置用户创建文件.目录的默认权限,通过从权限中拿走相应的位,格式 `umask nnn`.     理解   rwx rwx rwx 权限对应三类人群,所属人,所属组,其 ...

  2. JSP/Servlet基础

    动态网页的技术 html+css javascript(弱语言) jquery(改造) jsp(java的html) servlet(核心) S2SH:structs2 (springmvc) spr ...

  3. xftp无法用root账号登录问题

    编辑vim /etc/ssh/sshd_config文件 把PermitRootLogin Prohibit-password 添加#注释掉 新添加:PermitRootLogin yes 更改Per ...

  4. Linux rhcsa认证考试试题模拟

    声明: 此套试题是2017年rhcsa考试题库,本题库需配合相对应的机器操作,实验环境在我的网盘下载 考试环境: server.group8.example.com 172.24.8.254/24 s ...

  5. [程序员代码面试指南]数组和矩阵问题-找到无序数组中最小的k个数(堆排序)

    题目链接 https://www.nowcoder.com/practice/6a296eb82cf844ca8539b57c23e6e9bf?tpId=13&tqId=11182&t ...

  6. python基础 ------ 集合

    ---恢复内容开始--- -----   集合 使用场景:网购的订单.与商品ID 一一对应的商品信息 python的内置类型:List  Tuple  Dictionary ----  列表   LI ...

  7. 【转载】在linux下别用zip 用tar来压缩文件 zip解压后还是utf-8 window10是GBK

    3.2 使用 unzip 命令解压缩 zip 文件 将 shiyanlou.zip 解压到当前目录:   $ unzip shiyanlou.zip 使用安静模式,将文件解压到指定目录:   $ un ...

  8. adduser与useradd的区别

    问题:使用 useradd 创建用户,发现 /home 目录下没有自动创建关于用户的目录.所以做了一番调查研究 useradd是一个linux命令,但是它提供了很多参数在用户使用的时候根据自己的需要进 ...

  9. 在javaScript中把非数值类型的数据自动转换为数值类型的两种方式

    一.使用Number()函数. 二.使用parseInt()/parseFloat()函数. 详情: 一.使用Number()函数将非数值类型的数据自动的转化为数组类型 Number()函数可以将任何 ...

  10. npm与cnpm的install无反应

    问题描述 1.npm -v检查版本正常,npm install安装依赖提示超时 2.cnpm -v检查版本正常,cnpm install安装依赖无反应(输入命令后没有任何提示,一直卡在那) 解决(参考 ...