细贩赫搪弟冬杀摧棵钎陵拳达
参考文档
轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点。
Dom构造：
js部分
实际操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</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">
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/2.jpg"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/3.jpg"/></a>
</div>
</div>
</div>
</div>
</body>
</html>
执行，此时可以左右滑动图片
放置进度圆点，建议与group同级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</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">
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/2.jpg"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/3.jpg"/></a>
</div>
</div>
<!--建议进度圆点与group同级，有多少张图片就放多少个mui-indicator的div-->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
</body>
</html>
执行：
此时用户划到第三张图片就不能向右滑动了，实现循环，即划到第三张后，再划就划到第1张
轮播循环
若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1，代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</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">
<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="images/3.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/2.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/3.jpg"height="400"/></a>
</div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
</div>
<!--建议进度圆点与group同级，有多少张图片就放多少个mui-indicator的div-->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
</body>
</html>
执行，此时左划到第一个后继续左划，会变为第3个图片，右划到第3个后再次划动会变为第一张图片
使用js实现自动播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</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">
<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="images/3.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/2.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/3.jpg"height="400"/></a>
</div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
</div>
<!--建议进度圆点与group同级，有多少张图片就放多少个mui-indicator的div-->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script type="text/javascript">
//自动播放并不是操作某一个按钮或者事件触发的
//自动播放是界面加载完了就会执行的代码，所以需要mui.plusReady()
//可以认为是mui的就绪函数
mui.plusReady(function(){
//选中轮播组件
var slider=mui('.mui-slider');
//每隔2秒自动更换
slider.slider({interval:2000});
});
</script>
</body>
</html>
执行，此时即可自动播放
如果不想自动播放,代码改为：interval:0即可
指定切换到第3张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</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">
<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="images/3.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/2.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/3.jpg"height="400"/></a>
</div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
</div>
<!--建议进度圆点与group同级，有多少张图片就放多少个mui-indicator的div-->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<button type="button" onclick="changePic();">切换到第3张图片</button>
</div>
<script type="text/javascript">
//自动播放并不是操作某一个按钮或者事件触发的
//自动播放是界面加载完了就会执行的代码，所以需要mui.plusReady()
//可以认为是mui的就绪函数
mui.plusReady(function(){
//选中轮播组件
var slider=mui('.mui-slider');
//每隔2秒自动更换
slider.slider({interval:2000});
});
//切换到第3张图片
function changePic()
{
//选中轮播组件
var slider=mui('.mui-slider');
//切换到第3张图片
slider.slider().gotoItem(2);
}
</script>
</body>
</html>
执行，点击按钮即可切换到第3张图片
实现动态切换可以这样写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</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">
<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="images/3.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/2.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/3.jpg"height="400"/></a>
</div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
</div>
<!--建议进度圆点与group同级，有多少张图片就放多少个mui-indicator的div-->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<button type="button" onclick="changePic(1);">切换到第2张图片</button>
</div>
<script type="text/javascript">
//自动播放并不是操作某一个按钮或者事件触发的
//自动播放是界面加载完了就会执行的代码，所以需要mui.plusReady()
//可以认为是mui的就绪函数
mui.plusReady(function(){
//选中轮播组件
var slider=mui('.mui-slider');
//每隔2秒自动更换
slider.slider({interval:2000});
});
//切换到第3张图片
function changePic(index)
{
//选中轮播组件
var slider=mui('.mui-slider');
//切换到第3张图片
slider.slider().gotoItem(index);
}
</script>
</body>
</html>
此时点击按钮将切换到第2张图片
轮播事件
当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：
1.实现滑动图片显示当前是第几张图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</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">
<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="images/3.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/2.jpg"height="400"/></a>
</div>
<div class="mui-slider-item">
<a href=""><img src="images/3.jpg"height="400"/></a>
</div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<!--图片默认百分百-->
<a href=""><img src="images/1.jpg"height="400"/></a>
</div>
</div>
<!--建议进度圆点与group同级，有多少张图片就放多少个mui-indicator的div-->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script type="text/javascript">
mui.plusReady(function(){
document.querySelector('.mui-slider').addEventListener('slide', function(e){
mui.toast('第'+e.detail.slideNumber+"张");
});
});
</script>
</body>
</html>
执行：
潘蔷欣沦呕祭阔波疵聊链副疟