mui 图片轮播

mui 图片轮播

PS:mui.css&mui.js自行解决

<style>
.mui-plus.mui-android header.mui-bar{
    display: none;
}
.mui-plus.mui-android .mui-bar-nav~.mui-content{
    padding: 0;
}
</style>

<!--主体-->
<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">
            <ul class="mui-table-view mui-table-view-chevron">
                <li id="switch" class="mui-table-view-cell">
                    定时轮播
                    <div class="mui-switch">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
            </ul>
            <div id="slider" 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/yuantiao.jpg">
                            <p class="mui-slider-title">静静看这世界</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/shuijiao.jpg">
                            <p class="mui-slider-title">幸福就是可以一起睡觉</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/muwu.jpg">
                            <p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/cbd.jpg">
                            <p class="mui-slider-title">Color of SIP CBD</p>
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/yuantiao.jpg">
                            <p class="mui-slider-title">静静看这世界</p>
                        </a>
                    </div>
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../images/shuijiao.jpg">
                            <p class="mui-slider-title">幸福就是可以一起睡觉</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>
        </div>

//使用方法
<script>
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        var slider = mui("#slider");
        document.getElementById("switch").addEventListener('toggle', function(e) {
            if (e.detail.isActive) {
                slider.slider({
                    interval: 5000
                });
            } else {
                slider.slider({
                    interval: 0
                });
            }
        });
    </script>