無標(biāo)題文章

標(biāo)準(zhǔn)輪播組件（PC,IPAD通用）

引言：針對以往每一個(gè)頁面都有一個(gè)輪播組件，而且交互細(xì)節(jié)都不相同的情況，配合需求和UI做了一個(gè)標(biāo)準(zhǔn)組件。

新組件有如下要求

1 輪播切換有三種效果，漸現(xiàn)漸現(xiàn)，滑動漸現(xiàn)，直接切換。

2 必須可以配置合適的圖片懶加載。

3 必須可以配置動態(tài)切換小圓點(diǎn)，并且動作也自動切換時(shí)間同步。

5 能在IPAD上支持觸摸滑動。

4 默認(rèn)的動畫效果要柔和高大上，讓子游滿意。

5 調(diào)用方便，文檔齊全。

<b style="color:blue">1 使用方法和樣例</b>

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級的jscss前引用
    $this->add_css('mgslide-standard.css','page','css/widget');
    $this->add_script('mgslide-standard.js','foot','js/widget');
    // 引用page級js，調(diào)用組件
    $this->add_script('page-test-slide.js','foot','js3');

組件參數(shù)列表：

<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>參數(shù)名稱</b></td>
<td><b>作用描述</b></td>
<td><b>默認(rèn)值</b></td>
<td><b>參數(shù)值說明</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>設(shè)置自動切換事件間隔</td>
<td>false</td>
<td>false -- 輪播無自動切換
4000(數(shù)字) -- 間隔4000毫秒切換一次
<b>數(shù)字間隔最小值為1000毫秒</b></td>
</tr><tr>
<td>isTouchTurn</td>
<td>是否開啟觸屏支持</td>
<td>true</td>
<td>true -- 開啟觸屏支持
false -- 關(guān)閉觸屏支持
<b>一般不設(shè)置該參數(shù)，默認(rèn)支持觸屏</b></td>
</tr><tr>
<td>turnMode</td>
<td>輪播切換方式</td>
<td>"normal"</td>
<td>"normal" -- 直接切換
"slideFade" -- 滑動漸現(xiàn)切換
"fade" -- 漸隱漸現(xiàn)<b>（推薦使用）</b>
"slide" -- 滑動切換</td>
</tr><tr>
<td>transDuration</td>
<td>fade，slide模式下的切換漸變時(shí)間</td>
<td>500</td>
<td>毫秒為單位
<b>一般不設(shè)置該參數(shù)，使用默認(rèn)值</b></td>
</tr><tr>
<td>addTurnBtn</td>
<td>配置上一張，下一張按鈕</td>
<td>false</td>
<td>false -- 不添加默認(rèn)按鈕
"default" -- 添加默認(rèn)按鈕</td>
</tr><tr>
<td>addTurnDot</td>
<td>配置切換小圓點(diǎn)</td>
<td>false</td>
<td>false -- 不添加默認(rèn)小圓點(diǎn)
"default" -- 添加默認(rèn)小圓點(diǎn)
"animDot" -- 添加默認(rèn)動態(tài)小圓點(diǎn)
<b>首屏dabanner推薦用animDot</b></td>
</tr><tr>
<td>callback</td>
<td>切換回調(diào)函數(shù)</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 基本調(diào)用實(shí)例

首先我們先實(shí)現(xiàn)一個(gè)最簡單的實(shí)例，一個(gè)間隔4s自動切換的輪播

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)效果：

alt text
alt text

使用注意：

1 默認(rèn)樣式名要對應(yīng)好，輪播容器對應(yīng) mslide_content_box，banners容器對應(yīng)mslide_banners，單個(gè)標(biāo)簽對應(yīng)mslide_banner，并且當(dāng)前默認(rèn)顯示的banner樣式要加上。

2 autoTime設(shè)置不能小于1000，如果小于1000代碼里會默認(rèn)重置到1000ms。

3 忘記設(shè)置父容器mslide_content_box的寬高。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.2 給banner圖添加合適懶加載AND選擇banner切換效果

實(shí)現(xiàn)這個(gè)也非常簡單，只要把圖片鏈接放到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，輸出對象 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è)置開啟banner圖懶加載
});

實(shí)現(xiàn)效果：圖略，banner圖加載好后漸隱漸現(xiàn)出現(xiàn)，防止圖片太大太多首屏卡死

使用注意：

1 img-url要放在對應(yīng)的mslide_banner標(biāo)簽上。

2 現(xiàn)在相關(guān)應(yīng)用場景都是給mslide_banner標(biāo)簽加上對應(yīng)的底色（運(yùn)營填寫colorCode，例style="background:#4E55Ff"），這樣圖片漸隱加載的時(shí)候效果最好。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.3 添加默認(rèn)上下一張按鈕和切換小圓點(diǎn)

添加按鈕盒小圓點(diǎn)為全站的默認(rèn)樣式，如果有需要可以通過，在自己的page級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，輸出對象 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)效果：

alt text
alt text

使用注意：

組件自動添加的按鈕和小圓點(diǎn)是默認(rèn)樣式，有可以按照其樣式名來覆蓋，下面是默認(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ò)展--動態(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è)置添加動態(tài)切換小圓點(diǎn)
});

實(shí)現(xiàn)效果：

alt text
alt text

使用注意：

小圓點(diǎn)會根據(jù)自動切換的時(shí)間來同步轉(zhuǎn)動，但是假如自動切換autoTime設(shè)為false，小圓點(diǎn)的轉(zhuǎn)動周期變?yōu)槟J(rèn)的5s。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.4 banner切換回調(diào)的使用

需求中經(jīng)常會需要同步變背景色，或則同步自定義的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)效果：

alt text
alt text

使用注意：

觸發(fā)回調(diào)時(shí)間點(diǎn)是banner切換開始，而不是banner切換結(jié)束。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 標(biāo)準(zhǔn)輪播組件（PC,IPAD通用） 引言：針對以往每一個(gè)頁面都有一個(gè)輪播組件，而且交互細(xì)節(jié)都不相同的情況，配合需求...
    晴天的微風(fēng)閱讀 395評論 0贊 1
  • 本文轉(zhuǎn)自：http://www.cnblogs.com/dsxniubility/p/5596973.html 方...
    Lewis海閱讀 749評論 0贊 1
  • 組內(nèi)成員：前端：景鑫，張宇鵬 后端：李澤南、吳志勇。 一、項(xiàng)目架構(gòu) CSS框架：Bootstrap-3.3.7 J...
    不高興_d651閱讀 376評論 0贊 0
  • 1、感恩身體沒有病痛，清早有一次醒來。感恩空氣、陽光、微風(fēng)。謝謝你，我愛你。 2、感恩父母把做我的堅(jiān)實(shí)后盾，讓我每...
    AW小隊(duì)長閱讀 260評論 0贊 1
  • 環(huán)境配置 ：OpenCV在xCode中的安裝與環(huán)境配置 函數(shù)介紹 Point 可定義2D點(diǎn) Scalar 表示了具...
    FLNuo閱讀 1,603評論 8贊 2

友情鏈接更多精彩內(nèi)容