1.图片轮播
图片轮播：支持图片循环和不支持图片循环
支持循环：左滑，直接切换到第1张图片，图片可循环播放
不支持图片循环：图片轮播到最后一张图片将轮播停止，必须右滑回到第一张图片
若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1
轮播小圆圈：
用户可以设定是否自动轮播及轮播周期：
支持循环：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
</head>
<body>
<!-- 循环图片轮播 -->
<div id="slider1" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加节点 -->
<div class="mui-slider-item mui-slider-duplicate ">
<a href="#"><img src="imgs/04.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="imAgs/01.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="imgs/02.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="imgs/03.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="#"><img src="imgs/04.jpg" /></a>
</div>
<!-- 额外增加节点 -->
<div class="mui-slider-item mui-slider-duplicate ">
<a href="#"><img src="imgs/1.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>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
//循环图片轮播
var slider1 = mui("#slider1");
slider1.slider({
interval: 1000
});
</script>
</html>代码效果：
2.图片轮播---下方悬浮标题的循环图片轮播
轮播小圆圈：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
</head>
<body>
<!-- 循环图片轮播 -->
<div id="slider1" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加节点 -->
<div class="mui-slider-item mui-slider-duplicate ">
<a href="#">
<img src="images/00.jpg" />
<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果4</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/00.jpg" />
<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果1</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/00.jpg" />
<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果2</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/00.jpg" />
<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果3</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/00.jpg" />
<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果4</p>
</a>
</div>
<!-- 额外增加节点 -->
<div class="mui-slider-item mui-slider-duplicate ">
<a href="#">
<img src="images/00.jpg" />
<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果1</p>
</a>
</div>
</div>
<!-- 圆圈 -->
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
// //循环图片轮播
var slider1 = mui("#slider1");
slider1.slider({
interval: 1000
});
</script>
</html>代码效果：
