# 幻灯模块 ### 幻灯模块一  相关代码如下： ``` <style type="text/css"> .bg-dark { background: #333333 !important; } .aui-slide-node img { width: auto; height: 100%; } </style> <div id="aui-slide"> <div class="aui-slide-wrap" > <div class="aui-slide-node"> <ul class="aui-grid-nine"> <li class="aui-col-xs-4 aui-text-center"> <span class="aui-iconfont aui-icon-edit aui-text-primary"></span> <p>栏目</p> </li> <li class="aui-col-xs-4 aui-text-center"> <span class="aui-iconfont aui-icon-emoji aui-text-danger"></span> <p>栏目</p> </li> <li class="aui-col-xs-4 aui-text-center"> <span class="aui-iconfont aui-icon-favor aui-text-warning"></span> <p>栏目</p> </li> <li class="aui-col-xs-4 aui-text-center"> <span class="aui-iconfont aui-icon-phone aui-text-pink"></span> <p>栏目</p> </li> <li class="aui-col-xs-4 aui-text-center"> <span class="aui-iconfont aui-icon-taxi aui-text-dark"></span> <p>栏目</p> </li> <li class="aui-col-xs-4 aui-text-center"> <span class="aui-iconfont aui-icon-camera aui-text-info"></span> <p>栏目</p> </li> </ul> </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-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 aui-padded-15"> <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 class="aui-slide-node aui-bg-warning"> <img src="../image/demo5.png" /> </div> </div> <div class="aui-slide-page-wrap"><!--分页容器--></div> </div> <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); } </script> ``` ### 幻灯二  相关代码如下： ``` <style type="text/css"> .bg-dark { background: #333333 !important; } </style> <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> <script type="text/javascript"> 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' }) </script> ``` ### 样式三  相关代码如下： ``` <style type="text/css"> .bg-dark { background: #333333 !important; } </style> <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"> 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' }) </script> ```