MUI动态生成轮播图片
$$.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动态生成轮播图片的更多相关文章
- APP动态加载轮播图片
如果APP里面的轮播图片是动态加载的话,那么你会发现他不会轮播(前提是mui框架),这里都是用的mui框架,动态加载的图片因为mui的js查不到html上面没有图片,所以就不会轮播,需要手动重置下轮播 ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- HTML练习二--动态加载轮播图片
接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...
- mui 动态加载数据出现的问题处理 (silder )
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应
官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...
- JS 实现动态轮播图
JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- Unty3D动态加载图片
试验动态加载图片,代码如下: using UnityEngine; using System.Collections; public class DynamicLoad : MonoBehaviour ...
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
随机推荐
- Loadrunner回放https脚本时出现错误Error -27780 Connection reset by peer解决办法
录制好的https协议的web脚本,在脚本回放时会出现Error -27780: [GENERAL_MSG_CAT_SSL_ERROR]connect to host "......&quo ...
- 基于innodb_print_all_deadlocks从errorlog中解析MySQL死锁日志
本文是说明如何获取死锁日志记录的,不是说明如何解决死锁问题的. MySQL的死锁可以通过show engine innodb status;来查看,但是show engine innodb statu ...
- S8-codelab02
import news_cnn_model import numpy as np import os import pandas as pd import pickle import shutil i ...
- idea2018.1.5激活教程
这是地址 链接: https://pan.baidu.com/s/1lx5AfMjADYFcQARi7_GNIw 密码: nvfi 1下载解压到任意目录(前提你能找到) 2将复制到 bin目录下 如 ...
- 同机器与不同机器redis集群
此文为另外一位大神原创由于没有找到分享功能 粘贴复制到此 原地址为https://blog.csdn.net/u012042021/article/details/72818759 一.同机器下的 ...
- IDEA中使用中jetty启动java项目(非springboot)
1.安装maven helper插件,略 2.项目pom.xml文件中添加jetty插件配置 <build> <plugins> <plugin> <grou ...
- 并发系列2:Java并发的基石,volatile关键字、synchronized关键字、乐观锁CAS操作
由并发大师Doug Lea操刀的并发包Concurrent是并发编程的重要包,而并发包的基石又是volatile关键字.synchronized关键字.乐观锁CAS操作这些基础.因此了解他们的原理对我 ...
- wsl ubuntu 配置c++环境
1.sudo apt-get install build-essential 更新 配置源 2.sudo apt install gcc-8 3.sudo apt install g++-8 cd ...
- BASE64、MD5、SHA、HMAC几种加密算法
本篇内容简要介绍BASE64.MD5.SHA.HMAC几种加密算法. BASE64编码算法不算是真正的加密算法. MD5.SHA.HMAC这三种加密算法,可谓是非可逆加密,就是不可解密的加 ...
- PCIE4.0 简单介绍
关于PCI-E的标准,可以从2003年说起,2003年推出了PCI-E 1.0标准,在三年之后就推出了PCI-E 2.0,而在4年后的2010年就推出了PCI-E 3.0,但是在2010年之后的6年里 ...