testmarkdown
标准轮播组件(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
<?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.cnblogs.com/lanpang/p/4214896.html
最新文章
- golang语言学习第三课 条件语句
- 未来软件是什么样呢?数据库篇(转载)
- 编程之美-找到符合条件的整数
- 从几个角度谈谈内存的管理和划分
- 0xff00是65208
- 利用Socketserver实现简单的文件上传
- 联级阴影贴图CSM(Cascaded shadow map)原理与实现
- 【酷熊科技】工作积累 ----------- 内存优化之GC.MarkDependencies
- 2020-12-02
- .ashx接口单元测试
- systemctl的使用
- 反驳《SEO的几大罪行》
- Java Collection小结
- [python高德]行政区查询、调用wbe服务api获取省、市、区经纬度信息
- 快捷指令通知运行html,快捷指令通知怎么关?快捷指令通知关了又自动开了的原因...
- poi导出数据到word,带图片且图片数量不确定(能确定数量范围,这里是3-20张)
- java的round函数加点差_【JAVA】Math.Round()函数常见问题“四舍5入”
- cryptsetup 使用说明 中文翻译
- Matlab弹簧质量阻尼系统建模仿真
- qrcode(3):jquery-qrcode生成二维码
热门文章
- putty-gns3
- 《EMCAScript6入门》读书笔记——16.Generator函数的语法
- 179 Largest Number 把数组排成最大的数
- TP框架设置的LOG_LEVEL不起作用
- JavaScript if(x),==和===解析(翻译整理)
- linux内核系列之二_资源
- ORACLE 10g创建单实例 ASM
- SuperWebSocket发布0.1版本
- 【Cocos2d游戏开发之八】开启高清(960*640)模式问题与解答、图片适配以及设置iphone横竖屏...
- 恩布企业 IM 安卓端 1.1 增强版本