標準輪播組件（PC,IPAD通用）
引言：針對以往每一個頁面都有一個輪播組件，而且交互細節都不相同的情況，配合需求和UI做了一個標準組件。
新組件有如下要求
1 輪播切換有三種效果，漸現漸現，滑動漸現，直接切換。
2 必須可以配置合適的圖片懶加載。
3 必須可以配置動態切換小圓點，并且動作也自動切換時間同步。
5 能在IPAD上支持觸摸滑動。
4 默認的動畫效果要柔和高大上，讓子游滿意。
5 調用方便，文檔齊全。
<b style="color:blue">1 使用方法和樣例</b>
1.0 組件調用配置介紹
需要引用組件的js，css文件：public/js/widget/mgslide-standard.js，public/css/widget/mgslide-standard.css
引用實例：appbeta\classes\controller\tuan\mact\mevent.php:117
// 引用輪播組件js，css，必須在page級的jscss前引用
$this->add_css('mgslide-standard.css','page','css/widget');
$this->add_script('mgslide-standard.js','foot','js/widget');
// 引用page級js，調用組件
$this->add_script('page-test-slide.js','foot','js3');
組件參數列表：
<style>.param_table {max-width: 100%;background-color: #fff;}.param_table th {font-weight: bold;}.param_table th, table td {border: 1px solid #ccc;padding: 6px 13px;line-height: 26px;}.param_table tr {border-top: 1px solid #ccc;background-color: #fff;}.param_table tr:nth-child(2n) {background-color: #f8f8f8;}br{line-height:1px;}</style>
<table class="param_table"><tbody>
<tr>
<td><b>參數名稱</b></td>
<td><b>作用描述</b></td>
<td><b>默認值</b></td>
<td><b>參數值說明</b></td>
</tr><tr>
<td>bannerBox</td>
<td>輪播容器jquery對象</td>
<td>null</td>
<td>一般引用樣式名為輪播容器</td>
</tr><tr>
<td>isLazyImage</td>
<td>是否需要圖片懶加載</td>
<td>false</td>
<td>true -- 需要懶加載
false -- 不需要懶加載</td>
</tr><tr>
<td>autoTime</td>
<td>設置自動切換事件間隔</td>
<td>false</td>
<td>false -- 輪播無自動切換
4000(數字) -- 間隔4000毫秒切換一次
<b>數字間隔最小值為1000毫秒</b></td>
</tr><tr>
<td>isTouchTurn</td>
<td>是否開啟觸屏支持</td>
<td>true</td>
<td>true -- 開啟觸屏支持
false -- 關閉觸屏支持
<b>一般不設置該參數，默認支持觸屏</b></td>
</tr><tr>
<td>turnMode</td>
<td>輪播切換方式</td>
<td>"normal"</td>
<td>"normal" -- 直接切換
"slideFade" -- 滑動漸現切換
"fade" -- 漸隱漸現<b>（推薦使用）</b>
"slide" -- 滑動切換</td>
</tr><tr>
<td>transDuration</td>
<td>fade，slide模式下的切換漸變時間</td>
<td>500</td>
<td>毫秒為單位
<b>一般不設置該參數，使用默認值</b></td>
</tr><tr>
<td>addTurnBtn</td>
<td>配置上一張，下一張按鈕</td>
<td>false</td>
<td>false -- 不添加默認按鈕
"default" -- 添加默認按鈕</td>
</tr><tr>
<td>addTurnDot</td>
<td>配置切換小圓點</td>
<td>false</td>
<td>false -- 不添加默認小圓點
"default" -- 添加默認小圓點
"animDot" -- 添加默認動態小圓點
<b>首屏dabanner推薦用animDot</b></td>
</tr><tr>
<td>callback</td>
<td>切換回調函數</td>
<td>空方法function(){}</td>
<td>傳入function(index)，
index代表要將切換到banner的ind</td>
</tr>
</tbody></table>
測試demo地址：http://www.mogujie.lanpang/tuan/mact/mevent/testslidepc
demoView： appbeta/views/webdemo/lanpang/demo-slide-pc.php
demojs ： public/js3/src/page-test-slide.js
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.1 基本調用實例
首先我們先實現一個最簡單的實例，一個間隔4s自動切換的輪播
PHP實例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:15
<?php // 設置父容器寬高 ?>
<style>.mslide_content_box { width: 1158px; height:536px; }</style>
<h2>一個最基本的調用實例</h2>
<?php // 輪播容器 ?>
<div class="mslide_content_box" id="pc_banner_default">
<?php // banners容器 ?>
<div class="mslide_banners">
<?php // 第一個banner輸出樣式mslide_banner_show ?>
<a class="mslide_banner mslide_banner_show" href="#" target="_blank">
<img src="http://img.fashionpia.com/images/exhibit/M_1265.jpg" alt=""/>
</a>
<a class="mslide_banner" href="#" target="_blank">
<img src="http://img.fashionpia.com/images/exhibit/M_1266.jpg" alt=""/>
</a>
<a class="mslide_banner" href="#" target="_blank">
<img src="http://img.fashionpia.com/images/exhibit/M_1261.jpg" alt=""/>
</a>
</div>
</div>
js實例代碼 : public/js3/src/page-test-slide.js ：11
// 獲取輪播容器
var bannerPcDefault = $('#pc_banner_default');
// 初始化輪播
var MSliderDefault = new MOGU.MSlider({
bannerBox : bannerPcDefault,
autoTime : 4000 //設置間隔時間4s
});
實現效果：
使用注意：
1 默認樣式名要對應好，輪播容器對應 mslide_content_box，banners容器對應mslide_banners，單個標簽對應mslide_banner，并且當前默認顯示的banner樣式要加上。
2 autoTime設置不能小于1000，如果小于1000代碼里會默認重置到1000ms。
3 忘記設置父容器mslide_content_box的寬高。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.2 給banner圖添加合適懶加載AND選擇banner切換效果
實現這個也非常簡單，只要把圖片鏈接放到banner標簽的img-url屬性里，然后js里設置isLazyImage就行了
PHP實例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:35
<h2>實現banner圖片的懶加載</h2>
<?php // 輪播容器 ?>
<div id="pc_banner_lasyimg" class="mslide_content_box">
<?php // banners容器 ?>
<div class="mslide_banners">
<?php // 第一個banner輸出樣式mslide_banner_show，輸出對象 href--banner落地鏈接，img-url -- 圖片src地址 ?>
<a class="mslide_banner mslide_banner_show" href="#" target="_blank"
img-url="http://img.fashionpia.com/images/exhibit/M_1265.jpg"></a>
<a class="mslide_banner" href="#" target="_blank"
img-url="http://img.fashionpia.com/images/exhibit/M_1266.jpg"></a>
<a class="mslide_banner" href="#" target="_blank"
img-url="http://img.fashionpia.com/images/exhibit/M_1261.jpg"></a>
</div>
</div>
js實例代碼 : public/js3/src/page-test-slide.js ：21
// 獲取輪播容器
var bannerPcLasyimg = $('#pc_banner_lasyimg');
// 初始化輪播
var MSliderLasyimg = new MOGU.MSlider({
bannerBox : bannerPcLasyimg,
autoTime : 4000,
isLazyImage : true //設置開啟banner圖懶加載
});
實現效果：圖略，banner圖加載好后漸隱漸現出現，防止圖片太大太多首屏卡死
使用注意：
1 img-url要放在對應的mslide_banner標簽上。
2 現在相關應用場景都是給mslide_banner標簽加上對應的底色（運營填寫colorCode，例style="background:#4E55Ff"），這樣圖片漸隱加載的時候效果最好。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.3 添加默認上下一張按鈕和切換小圓點
添加按鈕盒小圓點為全站的默認樣式，如果有需要可以通過，在自己的page級css覆蓋樣式名進行修改
PHP實例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:49
<h2>添加默認上下一張按鈕和切換小圓點</h2>
<?php // 輪播容器 ?>
<div id="pc_banner_addtrigger" class="mslide_content_box">
<?php // banners容器 ?>
<div class="mslide_banners">
<?php // 第一個banner輸出樣式mslide_banner_show，輸出對象 href--banner落地鏈接，img-url -- 圖片src地址 ?>
。。。略。。。
</div>
</div>
js實例代碼 : public/js3/src/page-test-slide.js
// 獲取輪播容器
var bannerPcAddTrigger = $('#pc_banner_addtrigger');
// 初始化輪播
var MSliderAddTrigger = new MOGU.MSlider({
bannerBox : bannerPcAddTrigger,
autoTime : 4000,
isLazyImage : true,
addTurnBtn : "default",//設置添加默認切換按鈕
addTurnDot : "default" //設置添加默認切換小圓點
});
實現效果：
使用注意：
組件自動添加的按鈕和小圓點是默認樣式，有可以按照其樣式名來覆蓋，下面是默認按鈕，小圓點的html。
<?php // 上一張，下一張按鈕 ?>
<a class="msilde_toggle_btn msilde_prev_btn" href="javascript:;" title="上一張"></a>
<a class="msilde_toggle_btn msilde_next_btn" href="javascript:;" title="下一張"></a>
<?php // 切換小圓點 ?>
<?php
// 圖片個數
$imageNum = 3;
?>
<?php // 計算輸出負值magin-left，確保居中 ?>
<div class="msilde_dot_box clearfix" style="margin-left:-<?php zecho($imageNum*8);?>px">
<?php for($i=0;$i<$imageNum;$i++) {?>
<a href="javascript:;" class="dot_default <?php if($i==0) zecho('dot_show');?> fl"></a>
<?php } ?>
</div>
擴展--動態小圓點的實現：
js實例代碼 : public/js3/src/page-test-slide.js
// 獲取輪播容器
var bannerPcAddTrigger2 = $('#pc_banner_addtrigger2');
// 初始化輪播
var MSliderAddTrigger2 = new MOGU.MSlider({
bannerBox : bannerPcAddTrigger2,
autoTime : 4000,
isLazyImage : true,
turnMode : "slideFade",
addTurnBtn : "default",
addTurnDot : "animDot" //設置添加動態切換小圓點
});
實現效果：
使用注意：
小圓點會根據自動切換的時間來同步轉動，但是假如自動切換autoTime設為false，小圓點的轉動周期變為默認的5s。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.4 banner切換回調的使用
需求中經常會需要同步變背景色，或則同步自定義的banner顯示按鈕，所組件提供一個返回banner的index回調函數
PHP實例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:77
<h2>banner切換回調的使用：當前banner的ind為<span id="bannerInd">0</span></h2>
<?php // 輪播容器 ?>
<div id="pc_banner_callback" class="mslide_content_box">
。。。。略。。。。
</div>
js實例代碼 : public/js3/src/page-test-slide.js
// 獲取輪播容器
var bannerPcCallBack = $('#pc_banner_callback');
// 初始化輪播
var MSliderCallBack = new MOGU.MSlider({
bannerBox : bannerPcCallBack,
autoTime : 4000,
isLazyImage : true,
turnMode : "slide",
addTurnBtn : "default",
addTurnDot : "default",
callback : function(index) {
// 回調，同步顯示title中ind值
$('#bannerInd').text(index);
}
});
實現效果：
使用注意：
觸發回調時間點是banner切換開始，而不是banner切換結束。
