<!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>