# 幻燈模塊
### 幻燈模塊一

相關代碼如下:
```
<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>
```
- APP模塊
- 歡迎頁
- 頭部模塊
- 底部模塊
- 圖文列表
- 商品展示
- 文字列表
- 內容頁一
- 評論頁
- N宮格
- 獲得上一級的欄目名稱
- 搜索模塊
- 圖標
- 幻燈模塊
- 消息頁
- 個人中心
- 個人中心—我的收藏
- 個人中心—資料修改
- 個人中心—我的錢包(賬戶)
- 咨詢頁面
- APP模板
- 注冊 頁面一
- 注冊 頁面二
- 登錄 頁面一
- 登錄 頁面二
- 忘記密碼 頁面一
- 會員中心 首頁一
- 會員中心 首頁二
- 會員中心 首頁三
- 會員中心 資料修改
- 申請審核步驟
- 商品訂單一
- 游戲頁面
- 新聞列表頁
- 圖文列表頁
- 商品列表頁
- 商品詳情頁
- 聊天
- 消息列表
- 聊天界面
- 發布需求
- 前端框架
- CSS Framework
- trim 字符處理
- dom 選擇器
- 樣式
- evt 事件
- 選擇元素
- 屬性
- 文本
- 位置
- json
- 設置
- 提示
- AJAX
- storage 本地存儲
- API對象
- 常用函數
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用圖片
- asd