【MUI】图片轮播
来源:互联网 发布:java multiply用法 编辑:程序博客网 时间:2024/05/18 06:58
引言
MUI是最接近原生APP体验的高性能前端框架。最近在做的积分系统手机端就是用的MUI,我负责的是主界面的部分,需要显示公司的宣传图片,就类似于去逛街的时候外面的LED屏上显示的各种图片,定时切换图片,需要实现的就是这个效果。下面简单的介绍一下是如何实现的,以及一个简单的小例子
图片轮播
默认不支持循环播放,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>
假设当前图片轮播中有1、2、3、4四张图片,从第1张图片起,依次向左滑动切换图片,当切换到第4张图片时,继续向左滑动,接下来会有两种效果:
- 支持循环:左滑,直接切换到第1张图片;
- 不支持循环:左滑,无反应,继续显示第4张图片,用户若要显示第1张图片,必须连续向右滑动切换到第1张图片;
.mui-slider-loop
类及DOM节点来控制; 若要支持循环,则需要在.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>
下面是一个完整的例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="../css/mui.min.css"> <!--App自定义的css--> <link rel="stylesheet" type="text/css" href="../css/app.css"/> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">图片轮播</h1> </header> <div class="mui-content"> <ul class="mui-table-view mui-table-view-chevron"> <li id="switch" class="mui-table-view-cell"> 定时轮播 <div class="mui-switch"> <div class="mui-switch-handle"></div> </div> </li> </ul> </div> <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop"> <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="../images/yuantiao.jpg"> </a> </div> <!-- 第一张 --> <div class="mui-slider-item"> <a href="#"> <img src="../images/shuijiao.jpg"> </a> </div> <!-- 第二张 --> <div class="mui-slider-item"> <a href="#"> <img src="../images/muwu.jpg"> </a> </div> <!-- 第三张 --> <div class="mui-slider-item"> <a href="#"> <img src="../images/cbd.jpg"> </a> </div> <!-- 第四张 --> <div class="mui-slider-item"> <a href="#"> <img src="../images/yuantiao.jpg"> </a> </div> <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="../images/shuijiao.jpg"> </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 src="../js/mui.min.js"></script> <script type="text/javascript" charset="utf-8"> mui.init({ swipeBack:true //启用右滑关闭功能 }); var slider = mui("#slider"); document.getElementById("switch").addEventListener('toggle', function(e) { if (e.detail.isActive) { slider.slider({ interval: 5000 }); } else { slider.slider({ interval: 0 }); } }); </script> </body> </html>
具体效果图如下所示:
结语
学习一个新的东西时,尽量先去看官网的教程。先实现一个demo,然后再把想实现的效果往demo上套就行了。
阅读全文
0 0
- mui轮播图片
- mui 图片轮播
- mui轮播图片
- 【MUI】图片轮播
- MUI-图片轮播控件
- mui 轮播api
- 【mui】轮播slide
- MUI前端框架轮播图片+九宫格(左右滑动)
- mui图片轮播ajax动态加载后不轮播
- mui轮播使用问题
- MUI组件二:复选框、对话框、图片轮播、图标和输入框
- mui slider轮播组件常用API
- vue写一个图片轮播的组件,在父组件中引用。用到mui。push。concat。vue
- 图片轮播
- 腾讯图片轮播
- js图片轮播
- js图片轮播
- JavaScript 图片轮播
- 清除缓存
- leetcode002-数值处理Reverse Integer,Pow(x,n), atoi, Divide Two Integers
- MQTT填坑之旅
- c/c++ 实战之二分查找
- lunbotu
- 【MUI】图片轮播
- 计蒜客17115 Coin 数学 2017 ACM-ICPC 亚洲区(西安赛区)网络赛
- DS之顺序表
- hdu 6216 A Cubic number and A Cubic Number (2017 ACM/ICPC Asia Regional Qingdao Online)
- 《零基础入门学习python》学习过程(三)
- SSM框架做批量删除 详细步骤分析
- 微信公众平台开发之Java实现群发消息
- PopWindow
- scapy初识