mui 轮播图写法

 

 

<div class="mui-slider" id="slider">

        <div class="mui-slider-group mui-slider-loop">

            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->

            <div class="mui-slider-item mui-slider-item-duplicate">

            <a href="#"><img src="/html/img/staff-canteen-img/pic04.png"></a>

            </div>

            <!-- 第一张 -->

            <div class="mui-slider-item" id="item1">

                <a href="#"><img src="/html/img/staff-canteen-img/pic02.png"></a>

            </div>

            <!-- 第二张 -->

            <div class="mui-slider-item" id="item2">

            <a href="#"><img src="/html/img/staff-canteen-img/pic03.png"></a>

            </div>

            <div class="mui-slider-item" id="item2">

            <a href="#"><img src="/html/img/staff-canteen-img/pic04.png"></a>

            </div>

            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->

            <div class="mui-slider-item mui-slider-item-duplicate">

            <a href="#"><img src="/html/img/staff-canteen-img/pic02.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>

 

<link rel="stylesheet" href="/html/css/plugs/mui.css">

<script src="/html/js/plugs/mui.min.js"></script>

<script src="/html/js/plugs/jquery-3.3.1.min.js"></script>

<script>

    var gallery = mui('#slider');

        gallery.slider({

            interval:3000//，默认为0；

        });

</script>