轮播组件
提示️
轮播组件模块原版是不支持PC鼠标滑动切换的，本篇为了可以在PC上查看演示效果修改了源码做了兼容。
使用轮播组件需要先载入一个CSS文件和一个JS文件：
<link rel="stylesheet" type="text/css" href="/static/auicss/css/aui-slide.css" />
<script src="/static/auicss/script/aui-slide.js"></script>
使用下拉刷新之前需要先实例化对象 var slide = new auiSlide(options);，支持参数如下：
options 参数如下：
options: {
container: '', // 需要轮播的模块DOM对象
width: 375, // 轮播宽度，默认auto
height: 320, // 轮播高度
speed: 320, // 轮播速度，单位毫秒
autoPlay: 0, // 是否自动切换，单位毫秒，0不自动
pageShow: true, // 是否显示分页
pageStyle: 'dot', // 分页样式支持dot（点）、line（线条）
dotPosition: 'center', // 分页显示位置支持left（靠左）、center（居中）、right（靠右）
loop: true, // 是否支持循环播放
currentPage: function(index){}, // 获取当前分页【轮播切换后回调】
}
支持 slide.pageCount() 获取轮播分页数量
示例源码
<link rel="stylesheet" type="text/css" href="/static/auicss/css/aui-slide.css" />
<div class="aui-content-padded">
<p>优化说明：新增当前页（currentPage）回调及总页数获取；优化图片显示</p>
</div>
<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="/static/auicss/img/l1.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="/static/auicss/img/l2.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="/static/auicss/img/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="/static/auicss/img/l1.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="/static/auicss/img/l2.png" />
</div>
<div class="aui-slide-node bg-dark">
<img src="/static/auicss/img/l3.png" />
</div>
</div>
<div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<script type="text/javascript" src="/static/auicss/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>