轮播组件

参考《JS组件- aui-slide》使用方法

<link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
<div id="aui-slide">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node">
            <div class="aui-grid">
                <div class="aui-row">
                    <div class="aui-col-xs-4">
                        <div class="aui-badge">88</div>
                        <i class="aui-iconfont aui-icon-home"></i>
                        <div class="aui-grid-label">首页</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-gear"></i>
                        <div class="aui-grid-label">设置</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-map"></i>
                        <div class="aui-grid-label">地图</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-calendar"></i>
                        <div class="aui-grid-label">日历</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <div class="aui-badge"></div>
                        <i class="aui-iconfont aui-icon-date"></i>
                        <div class="aui-grid-label">日期</div>
                    </div>
                    <div class="aui-col-xs-4">
                        <div class="aui-dot"></div>
                        <i class="aui-iconfont aui-icon-cart"></i>
                        <div class="aui-grid-label">购物车</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content-padded">
                <span class="aui-text-danger">AUI Slide</span> 轮播组件不只局限于放置图片,可以自定义内容,分页样式有圆点(dot),线条(line),结合AUI Flex来实现图片及内容的水平、垂直居中
            </div>
        </div>
        <div class="aui-slide-node aui-bg-warning aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content-padded">
                <span class="aui-text-danger">AUI Slide</span>提供了常用的配置属性,可以自定义宽度,高度,自动播放,分页器样式等,支持无缝循环轮播
            </div>
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l1.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l3.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
            </div>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide2">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-danger">AUI Slide</span>会让你更方便让你布局轮播效果
            </div>
        </div>
        <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
            <div class="aui-content aui-padded-15">
                <span class="aui-text-success">AUI Slide</span>更好的支持循环滑动切换
            </div>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<div id="aui-slide3">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l1.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l2.png" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="../../image/l3.png" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">
    var slide = new auiSlide({
        container:document.getElementById("aui-slide"),
        // "width":300,
        "height":260,
        "speed":300,
        "pageShow":true,
        "pageStyle":'dot',
        "loop":true,
        'dotPosition':'center',
        currentPage:currentFun
    })

    function currentFun(index) {
        console.log(index);
    }
    var slide2 = new auiSlide({
        container:document.getElementById("aui-slide2"),
        // "width":300,
        "height":240,
        "speed":300,
        "autoPlay": 0, //自动播放
        "pageShow":true,
        "loop":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })
    var slide3 = new auiSlide({
        container:document.getElementById("aui-slide3"),
        // "width":300,
        "height":240,
        "speed":500,
        "autoPlay": 3000, //自动播放
        "loop":true,
        "pageShow":true,
        "pageStyle":'line',
        'dotPosition':'center'
    })
    console.log(slide3.pageCount());
</script>