標(biāo)準(zhǔn)輪播組件（PC,IPAD通用）
引言：針對(duì)以往每一個(gè)頁(yè)面都有一個(gè)輪播組件，而且交互細(xì)節(jié)都不相同的情況，配合需求和UI做了一個(gè)標(biāo)準(zhǔn)組件。
新組件有如下要求
1 輪播切換有三種效果，漸現(xiàn)漸現(xiàn)，滑動(dòng)漸現(xiàn)，直接切換。
2 必須可以配置合適的圖片懶加載。
3 必須可以配置動(dòng)態(tài)切換小圓點(diǎn)，并且動(dòng)作也自動(dòng)切換時(shí)間同步。
5 能在IPAD上支持觸摸滑動(dòng)。
4 默認(rèn)的動(dòng)畫(huà)效果要柔和高大上，讓子游滿意。
5 調(diào)用方便，文檔齊全。
1 使用方法和樣例
1.0 組件調(diào)用配置介紹
需要引用組件的js，css文件：public/js/widget/mgslide-standard.js，public/css/widget/mgslide-standard.css
引用實(shí)例：appbeta\classes\controller\tuan\mact\mevent.php:117
// 引用輪播組件js，css，必須在page級(jí)的jscss前引用
$this->add_css('mgslide-standard.css','page','css/widget');
$this->add_script('mgslide-standard.js','foot','js/widget');
// 引用page級(jí)js，調(diào)用組件
$this->add_script('page-test-slide.js','foot','js3');
組件參數(shù)列表：
參數(shù)名稱作用描述默認(rèn)值參數(shù)值說(shuō)明
bannerBox輪播容器jquery對(duì)象null一般引用樣式名為輪播容器
isLazyImage是否需要圖片懶加載falsetrue -- 需要懶加載
false -- 不需要懶加載
autoTime設(shè)置自動(dòng)切換事件間隔falsefalse -- 輪播無(wú)自動(dòng)切換
4000(數(shù)字) -- 間隔4000毫秒切換一次
數(shù)字間隔最小值為1000毫秒
isTouchTurn是否開(kāi)啟觸屏支持truetrue -- 開(kāi)啟觸屏支持
false -- 關(guān)閉觸屏支持
一般不設(shè)置該參數(shù)，默認(rèn)支持觸屏
turnMode輪播切換方式"normal""normal" -- 直接切換
"slideFade" -- 滑動(dòng)漸現(xiàn)切換
"fade" -- 漸隱漸現(xiàn)（推薦使用）
"slide" -- 滑動(dòng)切換
transDurationfade，slide模式下的切換漸變時(shí)間500毫秒為單位
一般不設(shè)置該參數(shù)，使用默認(rèn)值
addTurnBtn配置上一張，下一張按鈕falsefalse -- 不添加默認(rèn)按鈕
"default" -- 添加默認(rèn)按鈕
addTurnDot配置切換小圓點(diǎn)falsefalse -- 不添加默認(rèn)小圓點(diǎn)
"default" -- 添加默認(rèn)小圓點(diǎn)
"animDot" -- 添加默認(rèn)動(dòng)態(tài)小圓點(diǎn)
首屏dabanner推薦用animDot
callback切換回調(diào)函數(shù)空方法function(){}傳入function(index)，
index代表要將切換到banner的ind
測(cè)試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 基本調(diào)用實(shí)例
首先我們先實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的實(shí)例，一個(gè)間隔4s自動(dòng)切換的輪播
PHP實(shí)例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:15
<?php // 設(shè)置父容器寬高 ?>
<style>.mslide_content_box { width: 1158px; height:536px; }</style>
<h2>一個(gè)最基本的調(diào)用實(shí)例</h2>
<?php // 輪播容器 ?>
<div class="mslide_content_box" id="pc_banner_default">
<?php // banners容器 ?>
<div class="mslide_banners">
<?php // 第一個(gè)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實(shí)例代碼 :public/js3/src/page-test-slide.js ：11
// 獲取輪播容器
var bannerPcDefault = $('#pc_banner_default');
// 初始化輪播
var MSliderDefault = new MOGU.MSlider({
bannerBox : bannerPcDefault,
autoTime : 4000 //設(shè)置間隔時(shí)間4s
});
實(shí)現(xiàn)效果：
使用注意：
1 默認(rèn)樣式名要對(duì)應(yīng)好，輪播容器對(duì)應(yīng) mslide_content_box，banners容器對(duì)應(yīng)mslide_banners，單個(gè)標(biāo)簽對(duì)應(yīng)mslide_banner，并且當(dāng)前默認(rèn)顯示的banner樣式要加上。
2 autoTime設(shè)置不能小于1000，如果小于1000代碼里會(huì)默認(rèn)重置到1000ms。
3 忘記設(shè)置父容器mslide_content_box的寬高。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.2 給banner圖添加合適懶加載AND選擇banner切換效果
實(shí)現(xiàn)這個(gè)也非常簡(jiǎn)單，只要把圖片鏈接放到banner標(biāo)簽的img-url屬性里，然后js里設(shè)置isLazyImage就行了
PHP實(shí)例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:35
<h2>實(shí)現(xiàn)banner圖片的懶加載</h2>
<?php // 輪播容器 ?>
<div id="pc_banner_lasyimg" class="mslide_content_box">
<?php // banners容器 ?>
<div class="mslide_banners">
<?php // 第一個(gè)banner輸出樣式mslide_banner_show，輸出對(duì)象 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實(shí)例代碼 :public/js3/src/page-test-slide.js ：21
// 獲取輪播容器
var bannerPcLasyimg = $('#pc_banner_lasyimg');
// 初始化輪播
var MSliderLasyimg = new MOGU.MSlider({
bannerBox : bannerPcLasyimg,
autoTime : 4000,
isLazyImage : true //設(shè)置開(kāi)啟banner圖懶加載
});
實(shí)現(xiàn)效果：圖略，banner圖加載好后漸隱漸現(xiàn)出現(xiàn)，防止圖片太大太多首屏卡死
使用注意：
1 img-url要放在對(duì)應(yīng)的mslide_banner標(biāo)簽上。
2 現(xiàn)在相關(guān)應(yīng)用場(chǎng)景都是給mslide_banner標(biāo)簽加上對(duì)應(yīng)的底色（運(yùn)營(yíng)填寫(xiě)colorCode，例style="background:#4E55Ff"），這樣圖片漸隱加載的時(shí)候效果最好。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.3 添加默認(rèn)上下一張按鈕和切換小圓點(diǎn)
添加按鈕盒小圓點(diǎn)為全站的默認(rèn)樣式，如果有需要可以通過(guò)，在自己的page級(jí)css覆蓋樣式名進(jìn)行修改
PHP實(shí)例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:49
<h2>添加默認(rèn)上下一張按鈕和切換小圓點(diǎn)</h2>
<?php // 輪播容器 ?>
<div id="pc_banner_addtrigger" class="mslide_content_box">
<?php // banners容器 ?>
<div class="mslide_banners">
<?php // 第一個(gè)banner輸出樣式mslide_banner_show，輸出對(duì)象 href--banner落地鏈接，img-url -- 圖片src地址 ?>
。。。略。。。
</div>
</div>
js實(shí)例代碼 :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",//設(shè)置添加默認(rèn)切換按鈕
addTurnDot : "default" //設(shè)置添加默認(rèn)切換小圓點(diǎn)
});
實(shí)現(xiàn)效果：
使用注意：
組件自動(dòng)添加的按鈕和小圓點(diǎn)是默認(rèn)樣式，有可以按照其樣式名來(lái)覆蓋，下面是默認(rèn)按鈕，小圓點(diǎn)的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 // 切換小圓點(diǎn) ?>
<?php
// 圖片個(gè)數(shù)
$imageNum = 3;
?>
<?php // 計(jì)算輸出負(fù)值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>
擴(kuò)展--動(dòng)態(tài)小圓點(diǎn)的實(shí)現(xiàn)：
js實(shí)例代碼 :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" //設(shè)置添加動(dòng)態(tài)切換小圓點(diǎn)
});
實(shí)現(xiàn)效果：
使用注意：
小圓點(diǎn)會(huì)根據(jù)自動(dòng)切換的時(shí)間來(lái)同步轉(zhuǎn)動(dòng)，但是假如自動(dòng)切換autoTime設(shè)為false，小圓點(diǎn)的轉(zhuǎn)動(dòng)周期變?yōu)槟J(rèn)的5s。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.4 banner切換回調(diào)的使用
需求中經(jīng)常會(huì)需要同步變背景色，或則同步自定義的banner顯示按鈕，所組件提供一個(gè)返回banner的index回調(diào)函數(shù)
PHP實(shí)例代碼：appbeta\views\webdemo\lanpang\demo-slide-pc.php:77
<h2>banner切換回調(diào)的使用：當(dāng)前banner的ind為<span id="bannerInd">0</span></h2>
<?php // 輪播容器 ?>
<div id="pc_banner_callback" class="mslide_content_box">
。。。。略。。。。
</div>
js實(shí)例代碼 :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) {
// 回調(diào)，同步顯示title中ind值
$('#bannerInd').text(index);
}
});
實(shí)現(xiàn)效果：
使用注意：
觸發(fā)回調(diào)時(shí)間點(diǎn)是banner切換開(kāi)始，而不是banner切換結(jié)束。
