轮播组件是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. 五 akka streams kafka

    (转载 https://doc.akka.io/docs/akka-stream-kafka/current/home.html) 一: Akka Streams Kafka, also known ...

  2. 使用superobject 解析Json数据

    接口数据有如下规范{"error": 0, "msg": "", "data": ...} 其中数据data类型不确定. ...

  3. 性能测试之Jmeter学习(八)

    本节主要学习:断言 JMeter也有像LR中的检查点,本节就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一节讲到,我们对用户名和密码进行了参数化, ...

  4. WPF TabControl SelectionChanged 重复执行的问题

    很邪门的问题,我曾经都感觉是微软的bug了. 问题是这样的:在我的tabcontrol下的tabitem中有一个combobox控件,由于一些原因,需要执行tabcontrol的SelectionCh ...

  5. 21.运行Consent Page

    服务端把这个地方修改为true,需要设置 运行测试.服务端和客户端都运行起来 我们使用的用户是在这里配置的 服务端修改ConsentController 再次运行,但是页面都是乱码 openId和pr ...

  6. ACM-ICPC2018北京网络赛 Saving Tang Monk II(bfs+优先队列)

    题目1 : Saving Tang Monk II 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 <Journey to the West>(also < ...

  7. Linux 之问题集锦(一)

    1. 打开目录时,怎么只显示一个窗口 计算机 -- 编辑 -- 首选项 -- 行为 -- 总是总浏览器窗口中打开 2. linux中添加PATH时出现 Found a swap file by the ...

  8. 如何使用jmeter连接数据库并提取数据库中的值作为参数,与响应信息中提取的值进行比较

    思路: 连接数据库 获取数据库返回的数据 获取接口返回的数据 两者返回数据进行对比验证 连接数据库 1.jmeter要链接mysql数据库,首先得下载mysql jdbc驱动包(注:驱动包的版本一定要 ...

  9. uoj#308. 【UNR #2】UOJ拯救计划(并查集)

    传送门 如果把答案写出来,就是\(\sum_{i=1}^ki!\times {k\choose i}\times f_i\),其中\(f_i\)为选\(i\)种颜色方案 发现如果\(i\geq 3\) ...

  10. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...