轮播组件是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轮播图的更多相关文章

  1. vue+mui轮播图

    mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...

  2. mui轮播图为什么设置了自动播放参数也不能自动播放呢?

    最近在做项目的时候,发现Mui的轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 原来如果动态给mui的图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完 ...

  3. 两个页面实现mui轮播图与选项卡结合

    index.html页面 <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...

  4. mui 轮播

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. JS轮播图动态渲染四种方法

    一. 获取轮播图数据  ajax 二.根据数据动态渲染 (根据当前设备 屏幕宽度判断) 1. 准备数据 2. 把数据转换成html格式的字符串 动态创建元素 字符串拼接 模板引擎 框架方法 2.把字符 ...

  6. 使用Vue-MUI轮播图失效问题解决案例(在Vue的update中执行)

    我使用的是mui+vue,社区关于轮播图失效的问题也有几个.我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动,按照其他问答解决了vue生命周期等等的问题.提出来 ...

  7. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  8. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  9. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

随机推荐

  1. MQTT 客户端源码分析

    参看:逍遥子_mosquitto源码分析系列 参看:MQTT libmosquitto源码分析 参看:Mosquitto学习笔记 一.目录结构 首先我们还是来看一下 mosquitto-1.4.14 ...

  2. simple demo of Handlebars.js & jquery.js

    simple demo of Handlebars.js & jquery.js <html> <head> <script src="jquery-1 ...

  3. <正则吃饺子> :关于Collections中 比较器的简单使用

    在线文档地址: http://tool.oschina.net/apidocs/apidoc?api=jdk-zh sort public static <T extends Comparabl ...

  4. jQuery名字冲突 noConflict()方法

    今天检查项目的时候发现一个jquery变量$的控制权让渡问题,原因是: 开发这个模块的同事使用了一个日历插件,把$的控制权让出了,就导致了加载完这个页面后再加载其他页面就会报出$不是一个函数的错误. ...

  5. 转: Charles 从入门到精通

    目录与版权 转载请保留顶部的 Charles 中国特惠内容,本文的内容主要包括: Charles 的简介 如何安装 Charles 将 Charles 设置成系统代理 Charles 主界面介绍 过滤 ...

  6. 7.10实习培训日志-Maven 敏捷编程

    总结 今天早上主要学习了Maven和Idea的Docker插件,遇到了一些坑,对于Idea的Docker插件,不能下载,然后我去访问Idea插件官网,发现被墙了,只要开个VPN就好.下午主要是张总经理 ...

  7. 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 ...

  8. 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 ...

  9. ASP.NET学习笔记(三)ASP Global.asa 文件

    Global.asa 文件 Global.asa 文件是一个可选的文件,它可包含可被 ASP 应用程序中每个页面访问的对象.变量以及方法的声明.所有合法的浏览器脚本都能在 Global.asa 中使用 ...

  10. Django中ORM外键和表的关系(Django编程-4)

    外键 在MySQL中,表有两种引擎,一种是InnoDB,另外一种是myisam.如果使用的是InnoDB引擎,是支持外键约束的.外键的存在使得ORM框架在处理表关系的时候异常的强大.因此这里我们首先来 ...