文档章节

test

 蓝胖
发布于 2015/01/10 14:16
字数 1798
阅读 8
收藏 0
wu

标准轮播组件(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.jspublic/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');

组件参数列表:

<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>参数名称</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 -- 需要懒加载<br/>false -- 不需要懒加载</td> </tr><tr> <td>autoTime</td> <td>设置自动切换事件间隔</td> <td>false</td> <td>false -- 轮播无自动切换<br>4000(数字) -- 间隔4000毫秒切换一次<br/><b>数字间隔最小值为1000毫秒</b></td> </tr><tr> <td>isTouchTurn</td> <td>是否开启触屏支持</td> <td>true</td> <td>true -- 开启触屏支持<br/>false -- 关闭触屏支持<br/><b>一般不设置该参数,默认支持触屏</b></td> </tr><tr> <td>turnMode</td> <td>轮播切换方式</td> <td>"normal"</td> <td>"normal" -- 直接切换<br/>"slideFade" -- 滑动渐现切换<br>"fade" -- 渐隐渐现<b>(推荐使用)</b><br/>"slide" -- 滑动切换</td> </tr><tr> <td>transDuration</td> <td>fade,slide模式下的切换渐变时间</td> <td>500</td> <td>毫秒为单位<br/><b>一般不设置该参数,使用默认值</b></td> </tr><tr> <td>addTurnBtn</td> <td>配置上一张,下一张按钮</td> <td>false</td> <td>false -- 不添加默认按钮<br/>"default" -- 添加默认按钮</td> </tr><tr> <td>addTurnDot</td> <td>配置切换小圆点</td> <td>false</td> <td>false -- 不添加默认小圆点<br/>"default" -- 添加默认小圆点<br>"animDot" -- 添加默认动态小圆点<br/><b>首屏dabanner推荐用animDot</b></td> </tr><tr> <td>callback</td> <td>切换回调函数</td> <td>空方法function(){}</td> <td>传入function(index),<br/>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切换结束。

© 著作权归作者所有

粉丝 0
博文 1
码字总数 1798
作品 0
杭州
私信 提问
20181008 zip压缩工具、tar打包、打包并压缩

zip压缩工具 支持压缩目录 压缩后不删除源文件/目录 安装: yum install -y zip unzip解压缩 安装: yum install -y unzip tar 打包工具 打包并压缩 tar -zcvf # 打包时支持gzip压缩 tar -jcv...

野雪球
2018/10/09
19
0
Linux文档压缩与打包

zip压缩工具zip压缩包在Windows和Linux中比较常用,它可以压缩目录和文件,压缩目录时,需要指定目录下的文件zip 1.txt.zip 1.txt 压缩文件并指明目录下的文件unzip 1.txt.zip[root@localhos...

yzllinux
2018/01/06
0
0
Python 中的贪婪排名算法

在较早的一遍文章中,我曾经提到过我已经写了一个属于自己的排序算法,并且认为需要通过一些代码来重新回顾一下这个排序算法。 对于我所完成的工作,我核实并且保证微处理器的安全。对非常复...

renwofei423
2013/06/02
1K
2
android5.0以上版本调用jni崩溃

log如下: 02-29 20:34:12.302: E/Test(16577): Step1:Function:init_config_from_xml,type:8 02-29 20:34:12.302: E/Test(16577): Step4:InputBuf: 02-29 20:34:12.302: E/Test(16577): S......

tsmaomaoyu
2016/02/29
2.5K
13
list移除元素容易发生的问题

list 大家应该并不陌生, 如果移除List中的元素呢,也不难,首先想到就是其remove()方法。 下面列出remove()的具体实现,以供参考: snippetid="2366209" snippetfilename="blog201705011_7...

zqbx7
2017/05/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

高速PCB设计软件allegro中与网络有关的约束规则设置

在allegro pcb的设计过程中,设计约束规则包括时序规则、间距规则、信号完整性规则以及物理规则等,本期主要详细讲解与物理、间距与电气约束中的线宽、线间距物理规则的设置。 一、线宽设置 ...

demyar
14分钟前
1
0
Linux 启动停止SpringBoot jar 程序部署Shell 脚本

#!/bin/bash #这里可替换为你自己的执行程序,其他代码无需更改 APP_NAME=algorithm.jar #使用说明,用来提示输入参数 usage() { echo "Usage: sh 执行脚本.sh [start|stop|restart|status]...

草庐过客
16分钟前
2
0
mysql-connector-java驱动升级到8.0后数据库保存时间出现时差

1.问题:在一个新项目中用到了新版的mysql jdbc 驱动后,发现保存到数据库的时间出现了时差 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId>......

ValSong
17分钟前
3
0
好程序员大数据教程Scala系列之隐式转换和隐式参数

5.1. 概念 隐式转换和隐式参数是Scala中两个非常强大的功能,利用隐式转换和隐式参数,你可以提供优雅的类库,对类库的使用者隐匿掉那些枯燥乏味的细节。 5.2. 作用 隐式的对类的方法进行增强...

好程序员官网
21分钟前
2
0
多线程必备

初次接触线程,可能有很多初学者搞不明白,始终云里雾里,那么本篇文章直接带大家介绍多线程必须知道的几个点 接下来没有多余,直接上干货 1. 进程和线程的区别是什么? 进程是执行着的应用程序,...

理性思考
24分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部