mui轮播图
轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件,这些组件有较多共同点。
Dom构造:
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item">
<a href="#" ><img src="img/1.jpg"/></a>
</div>
<div class="mui-slider-item">
<a href="#" ><img src="img/2.jpg"/></a>
</div>
<div class="mui-slider-item">
<a href="#" ><img src="img/3.jpg"/></a>
</div>
</div>
</div>
js部分
<script type="text/javascript">
mui.plusReady(function(){ //确保h5+及dom结构加载完毕,真机运行才会起作用 //mui.init();不能完成动态加载,而这段完整代码可以,我们以后肯定需要从远程服务器动态设置轮播效果及图片,那时这段代码就是必须要写的
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});
});
</script>
显示圆点
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
放置的位置是与mui-slider-group同级,有几张图片就写几个mui-indicator
轮播循环
若要支持循环,则需要在.mui-slider-group节点上增加.mui-slider-loop类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
</div>
</div>
轮播跳转
若要跳转到第x张图片,则可以使用图片轮播插件的gotoItem方法,例如:
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片,index从0开始;
轮播事件
当拖动切换显示内容时,会触发slide事件,通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例,为提高页面加载速度,页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时,再动态获取相应内容进行显示:
var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
if (event.detail.slideNumber === 1&&!item2Show) {
//切换到第二个选项卡
//根据具体业务,动态获得第二个选项卡内容;
var content = ....
//显示内容
document.getElementById("item2").innerHTML = content;
//改变标志位,下次直接显示
item2Show = true;
} else if (event.detail.slideNumber === 2&&!item3Show) {
//切换到第三个选项卡
//根据具体业务,动态获得第三个选项卡内容;
var content = ....
//显示内容
document.getElementById("item3").innerHTML = content;
//改变标志位,下次直接显示
item3Show = true;
}
});
图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化,比如我们可以在图片轮播界面显示当前正在看的是第几张图片:
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的;
document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
});
mui轮播图的更多相关文章
- vue+mui轮播图
mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...
- mui轮播图为什么设置了自动播放参数也不能自动播放呢?
最近在做项目的时候,发现Mui的轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 原来如果动态给mui的图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完 ...
- 两个页面实现mui轮播图与选项卡结合
index.html页面 <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...
- mui 轮播
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- JS轮播图动态渲染四种方法
一. 获取轮播图数据 ajax 二.根据数据动态渲染 (根据当前设备 屏幕宽度判断) 1. 准备数据 2. 把数据转换成html格式的字符串 动态创建元素 字符串拼接 模板引擎 框架方法 2.把字符 ...
- 使用Vue-MUI轮播图失效问题解决案例(在Vue的update中执行)
我使用的是mui+vue,社区关于轮播图失效的问题也有几个.我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动,按照其他问答解决了vue生命周期等等的问题.提出来 ...
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
随机推荐
- MQTT 客户端源码分析
参看:逍遥子_mosquitto源码分析系列 参看:MQTT libmosquitto源码分析 参看:Mosquitto学习笔记 一.目录结构 首先我们还是来看一下 mosquitto-1.4.14 ...
- simple demo of Handlebars.js & jquery.js
simple demo of Handlebars.js & jquery.js <html> <head> <script src="jquery-1 ...
- <正则吃饺子> :关于Collections中 比较器的简单使用
在线文档地址: http://tool.oschina.net/apidocs/apidoc?api=jdk-zh sort public static <T extends Comparabl ...
- jQuery名字冲突 noConflict()方法
今天检查项目的时候发现一个jquery变量$的控制权让渡问题,原因是: 开发这个模块的同事使用了一个日历插件,把$的控制权让出了,就导致了加载完这个页面后再加载其他页面就会报出$不是一个函数的错误. ...
- 转: Charles 从入门到精通
目录与版权 转载请保留顶部的 Charles 中国特惠内容,本文的内容主要包括: Charles 的简介 如何安装 Charles 将 Charles 设置成系统代理 Charles 主界面介绍 过滤 ...
- 7.10实习培训日志-Maven 敏捷编程
总结 今天早上主要学习了Maven和Idea的Docker插件,遇到了一些坑,对于Idea的Docker插件,不能下载,然后我去访问Idea插件官网,发现被墙了,只要开个VPN就好.下午主要是张总经理 ...
- HDU - 1171 Big Event in HDU 多重背包
B - Big Event in HDU Nowadays, we all know that Computer College is the biggest department in HDU. B ...
- HDU - 3499 Flight 双向SPFA+枚举中间边
Flight Recently, Shua Shua had a big quarrel with his GF. He is so upset that he decides to take a t ...
- ASP.NET学习笔记(三)ASP Global.asa 文件
Global.asa 文件 Global.asa 文件是一个可选的文件,它可包含可被 ASP 应用程序中每个页面访问的对象.变量以及方法的声明.所有合法的浏览器脚本都能在 Global.asa 中使用 ...
- Django中ORM外键和表的关系(Django编程-4)
外键 在MySQL中,表有两种引擎,一种是InnoDB,另外一种是myisam.如果使用的是InnoDB引擎,是支持外键约束的.外键的存在使得ORM框架在处理表关系的时候异常的强大.因此这里我们首先来 ...