$$.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. Kivy / Buildozer VM Ubuntu不能连接到网络的问题解决

    从kivy网站下载下来的Buildozer VM镜像在进入虚拟机以后无论虚拟机里边的虚拟网络编辑器以及网络适配器网络连接作何设置都不能连接到网络,在终端里边使用ifconfig查看ip地址是127.0 ...

  2. onenet简介

    物联科技|物联网开放平台探秘之移动OneNET平台(上) 物联科技 百家号17-07-1008:57 当前,国内外物联网行业发展如火如荼,众多传统行业也在谋求向物联网转型.许多电子工程师或出于个人意愿 ...

  3. openpyxl一点心得

    先上代码 from openpyxl import workbook,load_workbook class HomeWork(): def creat_xlsx(self): "" ...

  4. CSRF总结

    一.CSRF概述 CSRF跨站请求伪造,2007年被列为互联网20大安全隐患之一. 什么是跨站请求伪造?CSRF或XSRF 挟制用户在当前已经登录的web应用程序上执行非本意的操作的攻击方法.攻击者盗 ...

  5. angular1时间控件之时间比较大小,比如入住日期和离店日期,入住不能晚于离店时间

    功能可能是大家有时遇到的,不过angluar1现在用的人很少了,希望帮上和我一样掉坑里的朋友吧,之前自己也在网上找过几乎没找到angluar1和我代码需求一样的控件,没办法自己造 了,看代码图 就差不 ...

  6. vue_element_vue 引入路径@

    build/webpack.base.conf.js resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('s ...

  7. 安装软件,遇到弹框Windows Installer Coordinator,一直循环卡在这个弹框处

    转载自https://www.cliftonsystems.co.uk/fixing-windows-installer-coordinator-loop/ 复制粘贴原文内容,以防将来访问不到原网页了 ...

  8. BackgroundWorker 组件 -- 进度条

    代码: BackgroundWorker bw = new BackgroundWorker(); public MainWindow() { InitializeComponent(); bw.Wo ...

  9. mongodb突然出现不是内外部命令或可执行

    可能因为晚上突然停电,电脑突然关机,给mongoDB造成影响,第二天出现了: 通过百度搜索与尝试:https://blog.csdn.net/hh12211221/article/details/78 ...

  10. 20175314 实验三 敏捷开发与XP实践

    20175314 实验二 Java面向对象程序设计 一.实验内容 XP基础 XP核心实践 相关工具 二.实验步骤 (一)代码格式化 创建"175314.exp3"项目,在该项目下创 ...