$$.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命令:dirs

    语法 dirs [-clpv] [+N | -N] 说明 打印目录栈内容. 不带任何参数,在一行里打印.空白分隔. /home/code/dir/crypto /home/code/a/b /home ...

  2. vue组件is属性详解

    查看官网对is属性的讲解,请移步:vue.js 本文参考资料 在vue.js组件教程的一开始提及到了is特性 下面是官网对is属性使用的说明: 组件功能是vue项目的一大特色.组件可以扩展html元素 ...

  3. 前端笔记-jquery

    一.什么是jquery 1.jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team 2.jQuery是继prototype之后又一个优秀的 ...

  4. MATLA总结三

    1.将分数表示转换为小数表示: vpa( ******(表达式或者变量), n(小数点后几位)) 2.将一个式子中的变量带入具体的值: subs(  y, x, [2,3,4] ) 3.用工具箱确定阶 ...

  5. liteUploader上传控件的封装使用

    //原来的绑定方式 $('#' + frm_name).liteUploader({ script: url, params: { type: "image", size: siz ...

  6. Mysql数据库左外连接,右外连接,模糊查询

    内连接,左外连接,右外连接都是数据库的常用连接与使用手段 内连接 select * from assets_car c inner join category c on a.id = c.id; 左外 ...

  7. 学习日记--用Vector(向量)实现动态数组

    Vector的使用方法: 能在添加元素时增加长度的数组称为动态数组或可变长数组.相对地,必须事先指定长度,只能容纳一定数量元素的数组称为静态数组.下面分享一下如何借助STL(标准模板库)中的Vecto ...

  8. Linux debug

    proc文件系统中可以查看一些正在运行的变量如device-tree sh-3.2# cat /proc/device-tree/ #address-cells fixedregulator@9/ # ...

  9. 第一个spring简单的helloworld

    spring 是一个开源的框架 也是轻量级框架 1.导入jar包 spring的版本 4.0 目录: spring-framework-4.0.0.RELEASE-libs 下的jar  spring ...

  10. UML图之类图(转)

    基本概念 类图(Class Diagram): 类图是面向对象系统建模中最常用和最重要的图,是定义其它图的基础.类图主要是用来显示系统中的类.接口以及它们之间的静态结构和关系的一种静态模型. 类图的3 ...