mui轮播图

轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点。
Dom构造：

<div class="mui-slider">
    <div class="mui-slider-group">
       <div class="mui-slider-item">
           <a href="#" ><img src="img/1.jpg"/></a>
        </div>
        <div class="mui-slider-item">
            <a href="#" ><img src="img/2.jpg"/></a>
        </div>
        <div class="mui-slider-item">
            <a href="#" ><img src="img/3.jpg"/></a>
        </div>
    </div>
</div>

js部分

<script type="text/javascript"> mui.plusReady(function(){ //确保h5+及dom结构加载完毕，真机运行才会起作用 //mui.init();不能完成动态加载，而这段完整代码可以，我们以后肯定需要从远程服务器动态设置轮播效果及图片，那时这段代码就是必须要写的 //获得slider插件对象 var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//自动轮播周期，若为0则不自动播放，默认为0； }); }); </script>

显示圆点

<div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> </div>

放置的位置是与mui-slider-group同级，有几张图片就写几个mui-indicator

轮播循环
若要支持循环，则需要在.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>

轮播跳转
若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：

var gallery = mui('.mui-slider'); gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；

轮播事件
当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。

如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：

var item2Show = false,item3Show = false;//子选项卡是否显示标志 document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //切换到第二个选项卡 //根据具体业务，动态获得第二个选项卡内容； var content = .... //显示内容 document.getElementById("item2").innerHTML = content; //改变标志位，下次直接显示 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //切换到第三个选项卡 //根据具体业务，动态获得第三个选项卡内容； var content = .... //显示内容 document.getElementById("item3").innerHTML = content; //改变标志位，下次直接显示 item3Show = true; } });

图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化，比如我们可以在图片轮播界面显示当前正在看的是第几张图片：

document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是从0开始的； document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片"; });

转载于:https://www.cnblogs.com/yinmeng/p/7226293.html