无标题文章

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

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

新组件有如下要求

1 轮播切换有三种效果，渐现渐现，滑动渐现，直接切换。

2 必须可以配置合适的图片懒加载。

3 必须可以配置动态切换小圆点，并且动作也自动切换时间同步。

5 能在IPAD上支持触摸滑动。

4 默认的动画效果要柔和高大上，让子游满意。

5 调用方便，文档齐全。

1 使用方法和样例

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

组件参数列表：

参数名称	作用描述	默认值	参数值说明
bannerBox	轮播容器jquery对象	null	一般引用样式名为轮播容器
isLazyImage	是否需要图片懒加载	false	true -- 需要懒加载 false -- 不需要懒加载
autoTime	设置自动切换事件间隔	false	false -- 轮播无自动切换 4000(数字) -- 间隔4000毫秒切换一次 数字间隔最小值为1000毫秒
isTouchTurn	是否开启触屏支持	true	true -- 开启触屏支持 false -- 关闭触屏支持 一般不设置该参数，默认支持触屏
turnMode	轮播切换方式	"normal"	"normal" -- 直接切换 "slideFade" -- 滑动渐现切换 "fade" -- 渐隐渐现（推荐使用） "slide" -- 滑动切换
transDuration	fade，slide模式下的切换渐变时间	500	毫秒为单位 一般不设置该参数，使用默认值
addTurnBtn	配置上一张，下一张按钮	false	false -- 不添加默认按钮 "default" -- 添加默认按钮
addTurnDot	配置切换小圆点	false	false -- 不添加默认小圆点 "default" -- 添加默认小圆点 "animDot" -- 添加默认动态小圆点 首屏dabanner推荐用animDot
callback	切换回调函数	空方法function(){}	传入function(index)， index代表要将切换到banner的ind

测试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

一个最基本的调用实例



    
    

        
        
            
        
        
            
        
        
            
        
    

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

实现banner图片的懒加载


    
    

        
        
        
        
    

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

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


    
    

        
        。。。略。。。
    

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。

扩展--动态小圆点的实现：

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

banner切换回调的使用：当前banner的ind为0


    。。。。略。。。。

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切换结束。