美文网首页
无标题文章

无标题文章

作者: 晴天的微风 | 来源:发表于2015-01-10 14:22 被阅读0次

    标准轮播组件(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是否需要图片懒加载falsetrue -- 需要懒加载

    false -- 不需要懒加载

    autoTime设置自动切换事件间隔falsefalse -- 轮播无自动切换

    4000(数字) -- 间隔4000毫秒切换一次

    数字间隔最小值为1000毫秒

    isTouchTurn是否开启触屏支持truetrue -- 开启触屏支持

    false -- 关闭触屏支持

    一般不设置该参数,默认支持触屏

    turnMode轮播切换方式"normal""normal" -- 直接切换

    "slideFade" -- 滑动渐现切换

    "fade" -- 渐隐渐现(推荐使用)

    "slide" -- 滑动切换

    transDurationfade,slide模式下的切换渐变时间500毫秒为单位

    一般不设置该参数,使用默认值

    addTurnBtn配置上一张,下一张按钮falsefalse -- 不添加默认按钮

    "default" -- 添加默认按钮

    addTurnDot配置切换小圆点falsefalse -- 不添加默认小圆点

    "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

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

    相关文章

      网友评论

          本文标题:无标题文章

          本文链接:https://www.haomeiwen.com/subject/ptbfxttx.html