无标题文章

标准轮播组件（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');

组件参数列表：

<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
});

实现效果：

alt text

使用注意：

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" //设置添加默认切换小圆点
});

实现效果：

alt text

使用注意：

组件自动添加的按钮和小圆点是默认样式，有可以按照其样式名来覆盖，下面是默认按钮，小圆点的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" //设置添加动态切换小圆点
});

实现效果：

alt text

使用注意：

小圆点会根据自动切换的时间来同步转动，但是假如自动切换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);
    }
});

实现效果：

alt text

使用注意：

触发回调时间点是banner切换开始，而不是banner切换结束。

最后编辑于：2017.11.27 00:27:47

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,684评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,143评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,214评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,788评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,796评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,665评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,027评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,679评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,346评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,664评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,766评论 1赞 331
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,412评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,015评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,974评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,073评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,501评论 2赞 343

无标题文章

标准轮播组件（PC,IPAD通用）

引言：针对以往每一个页面都有一个轮播组件，而且交互细节都不相同的情况，配合需求和UI做了一个标准组件。

新组件有如下要求

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

1.0 组件调用配置介绍

1.1 基本调用实例

1.2 给banner图添加合适懒加载AND选择banner切换效果

1.3 添加默认上下一张按钮和切换小圆点

1.4 banner切换回调的使用

推荐阅读更多精彩内容