MUI-轮播插件实现-UI组件

一、简介： 轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点，如Dom构造基本相同。

<div class="mui-slider"><div class="mui-slider-group"><!--第一个内容区容器--><div class="mui-slider-item"><!-- 具体内容 --></div><!--第二个内容区--><div class="mui-slider-item"><!-- 具体内容 --></div></div>
</div>

二、以选项卡轮播为例

<div class="mui-slider" id="item"><div class="mui-slider-group" ><!--第一个内容区容器--><div class="mui-slider-item" id="item2"><!-- 具体内容 -->小狗狗</div><!--第二个内容区--><div class="mui-slider-item" id="item3"><!-- 具体内容 --></div></div>
</div>

// 轮播初始化，支持自动播放
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({interval:3000//自动轮播周期，若为0则不自动播放，默认为0；5000即5秒。
});//当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
//如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：
var item2Show = false,item3Show = false;//子选项卡是否显示标志document.querySelector('.mui-slider').addEventListener('slide', function(event) {if (event.detail.slideNumber === 0&&!item2Show) {//切换到第二个选项卡//根据具体业务，动态获得第二个选项卡内容；var content = '大狗狗';//显示内容document.getElementById("item2").innerHTML = content;//改变标志位，下次直接显示item2Show = true;} else if (event.detail.slideNumber === 1&&!item3Show) {//切换到第三个选项卡//根据具体业务，动态获得第三个选项卡内容；var content = '老猫咪';//显示内容document.getElementById("item3").innerHTML = content;//改变标志位，下次直接显示item3Show = true;}
});
//图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化，比如我们可以在图片轮播界面显示当前正在看的是第几张图片：
document.querySelector('.mui-slider').addEventListener('slide', function(event) {//注意slideNumber是从0开始的；document.getElementById("item").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
});

三、以图片轮播为例
图片轮播：是继承自slide插件，因此其DOM结构、事件均和slide插件相同；默认不支持循环播放，DOM结构如下：

<div class="mui-slider"><div class="mui-slider-group"><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>
</div>

构造支付宝“招财进宝”图片轮播如下：

<div id="slider" class="mui-slider" style="margin-top:20px;"><div class="mui-slider-group mui-slider-loop"><!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="./image/banner.png"></a></div><!-- 第一张 --><div class="mui-slider-item"><a href="#"><img src="./image/banner.png"></a></div><!-- 第二张 --><div class="mui-slider-item"><a href="#"><img src="./image/banner.png"></a></div><!-- 第三张 --><div class="mui-slider-item"><a href="#"><img src="./image/banner.png"></a></div><!-- 第四张 --><div class="mui-slider-item"><a href="#"><img src="./image/banner.png"></a></div><!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="./image/banner.png"></a></div></div><div class="mui-slider-indicator"><!-- 切换点 --><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div>
</div>

<script type="text/javascript">mui.init()// 轮播初始化，支持自动播放//获得slider插件对象var gallery = mui('.mui-slider');gallery.slider({interval:3000//自动轮播周期，若为0则不自动播放，默认为0；5000即5秒。});
</script>

页面展示

相关链接
1、MUI的简介
2、MUI的字体图标
3、MUI的事件处理
4、HbuilderX中新建MUI下的移动端App
5、H5+ Webview窗口对象
6、MUI-底栏实现-页面切换
7、MUI-标题栏实现-样式复写效果
8、MUI-栅格系统-实现元素排版
9、MUI-列表实现
10、MUI-列表实现2
11、MUI-轮播插件实现-UI组件
12、MUI-弹出菜单
13、MUI-页面刷新
14、MUI-新建子页面
15、MUI-页面之间传值（打开新的子页面）
16、HTML5+规范API-拍照功能
17、HTML5+规范API-系统相册获取功能
18、HTML5+规范API-地理位置获取
19、MUI-上拉刷新和下拉刷新
20、HTML5+规范API-扫码功能
21、HTML5+规范API-系统通讯录获取功能
22、Hbuilder无法完成应用程序云打包，一直报错需要打包校验
23、Hbuilder-应用程序打包
24、移动APP开发的三种常见模式
25、IOS系统测试APP时发现input内无法选中并输入值
26、MUI-购物车

MUI-轮播插件实现-UI组件相关推荐

3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
图片轮播插件-carouFredSel
carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...
slider轮播插件的多种写法
slider轮播插件相信大家经常会用到,写法也是各种各样,大部分都是用的第三方提供的组件使用,如果想基于自己的业务特点封装个组件供自己使用的话就要自己封装组件了,网上看了大部分写法都是通过js控制do ...
【Vue轮播插件】常用的vue轮播插件整理
写在前面: 现成的轮播插件是很方便,如果只是对文本类的数据进行轮播就很容易满足需求.但是,实际开发中,表格中可能还嵌套了自己封装的组件,组件中又是通过echarts图表来实现的.这个时候,这些vue插 ...
支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
android开源轮播图框架,最好用的轮播插件框架都在这里了，Github流行轮播框架...
一般来说,一个完整的WEB项目都少不了使用JavaScript轮播插件.对于整个简单的轮播插件,有时会我们会要求它有更可控的样式,不同的使用场景也需要不同的样式,最理想的轮播插件就是可定制.除了原生开 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
boostrap 鼠标滚轮滑动图片_BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)...
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 因为最近开发的项 ...

MUI-轮播插件实现-UI组件

MUI-轮播插件实现-UI组件相关推荐

最新文章

热门文章