<!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">hello</h1>
</header>
<!--需要轮播可轮训滑动的话 必须加上class="mui-slider-item-duplicate" 并且还要把最后一个轮播图多复制出来一条放到第一个上，再把第一个轮播图复制出来放到最后-->
<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="#"><div style="height: 10px;margin-top: 11px;">3</div><img src="imgs/banner1.png"/></a>
</div>
<div class="mui-slider-item">
<a href="#"><div style="height: 7px; margin-top: 11px;">1</div><img src="imgs/banner1.png"/></a>
</div>
<div class="mui-slider-item">
<a href="#"><div style="height: 7px;margin-top: 11px;">2</div><img src="imgs/banner1.png"/></a>
</div>
<div class="mui-slider-item">
<a href="#"><div style="height: 10px;margin-top: 11px;">3</div><img src="imgs/banner1.png"/></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><div style="height: 7px; margin-top: 11px;">1</div><img src="imgs/banner1.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>
</div>
<button type="button" onClick="changeTo(2)">切换到3个项目</button>
</div>
</body>
<script type="text/javascript">
/*mui.plusReady(function(){}) 加上此方法只会在真机上有效果*/
//获取slider 插件对象
var gellery = mui('.mui-slider');
gellery.slider({
interval: 5000//自动轮播周期，若为0则不自动播放，默认为0；
})
//切换到第几个项目
function changeTo(index){
var slider = mui('.mui-slider');
slider.slider().gotoItem(index);
}
</script>
</html>
浙公网安备 33010602011771号