$$.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. jquery中的globalEval()源码分析

    //20170724 huanhua 定义成全局的变量 // 在谷歌浏览器下运行的: // function fun(){ eval('var a=1'); } 此时 定义的 a 就是局部的变量 // ...

  2. Task的在主线程处理异常信息的Helper类

    最近使用task时候需要把异常记录日志,直接注入非单例模式的实例进入异步线程,在高并发情况下会出现一些问题. 所以需要把异常反馈给主线程 ,并且不在主线程里进行等待,研究相关资料后,自己写了一个简单的 ...

  3. Cacti性能优化和监控H3C交换机

    1.一般使用spine比较多,spine是一个基于C语言的,非常快速的轮询引擎.它是默认的cmd.php轮询的可选替代 wget http://www.cacti.net/downloads/spin ...

  4. Interpreting the genomic landscape of speciation: a road map for finding barriers to gene flow

    1.摘要 物种形成是种群间生殖隔离的进化过程,是连续的.复杂的,涉及多个相互作用的屏障.在完成之前,这一过程的影响会随着基因组的不同而变化,并可能导致具有分化和分化波峰和波谷的异质性基因组景观.当基因 ...

  5. Spinner 默认选中

    https://blog.csdn.net/u014737138/article/details/49495847 spinner.setSelection(2,true); 就这样一行代码,很重要 ...

  6. CHD 5.15 安装 Kylin

    这里主要参考官网安装单机案例,并写入到脚本中.具体请看如下:      1.说明           这里采用的是root用户安装,但是运行时需要改一些配置,不然没有权限      2.安装     ...

  7. IIS启动应用程序池报错"服务无法在此时接受控制信息"

    用管理员方式打开命令行 输入命令netsh winsock reset 这个命令在百科上的解释是 netsh winsock reset命令,作用是重置 Winsock 目录.如果一台机器上的Wins ...

  8. python之字典及其方法---整理集

    字典 特点: 使用逗号分隔的key:value形式: 使用大括号括起来: key-value的键值对中,value部分可以是任意类型: 列表.字典不能做为字典的key: 字典是无序的,哪个key-va ...

  9. Trie树详解(转)

    特别声明 本文只是一篇笔记类的文章,所以不存在什么抄袭之类的. 以下为我研究时参考过的链接(有很多,这里我只列出我记得的): Trie(字典树)的应用——查找联系人 trie树 Trie树:应用于统计 ...

  10. <a>超链接用作下载

    在a标签里添加  download=""  ,“ ”里面的内容可随意写,比如文件名. <a href="/download/武林秘籍.pdf" downl ...