淘宝店铺装修如何实现全屏轮播

淘宝店铺装修如何实现全屏轮播淘宝店装移植有一个神秘的模块,那就是—全屏轮播,这个神奇的模块,能提高店铺的档次,给与顾客视觉冲击,提升顾客印象但是由于淘宝常规用户不支持CSS(用来定义网页样貌的能力),所以我们无法用简单的div+CSS来做出属于自己的全屏轮播强大的装修师们几经研究,终于摆脱了CSS的束绷,结合淘宝的轮播组件,单靠DIV代码就实现了全屏轮播(有缺点)那么。不要CSS,我们怎么实现全屏轮播呢?…

淘宝店装移植有一个神秘的模块,那就是—全屏轮播,这个神奇的模块,能提高店铺的档次,给与顾客视觉冲击,提升顾客印象但是由于淘宝常规用户不支持CSS(用来定义网页样貌的能力),所以我们无法用简单的div+CSS来做出属于自己的全屏轮播强大的装修师们几经研究,终于摆脱了CSS的束绷,结合淘宝的轮播组件,单靠DIV代码就实现了全屏轮播(有缺点)

 

那么。不要CSS,我们怎么实现全屏轮播呢?

 

首先我要告诉大家全屏轮播的核心CSS属性—position:absolute

 

第一节:核心属性

 

position : absolute可以把它理解为定位,让我们的轮播能摆脱位置的束缚,只要有了它,全屏就不是问题,但是淘宝为了网页安全,限制了这个属性,在我们的自定义模块(用来存储自己的代码的模块》写入这个属性的时候,系统会直接给我们删掉,这就是为什么我们如果没有CSS权限就无法使用全屏轮播的首要原因.

 

后来根据研究。在调用淘宝的轮播组件(官方开源JS模块。也就是常用的普通轮播)代码的时候,页面会自动为组件内的代码,置入一个position:absolute属性,这样说很难理解。我们直接上图说明吧!

淘宝店铺装修如何实现全屏轮播

 

第二节:结构原理

 

有了核心属性,接下来就是让他全屏了。所谓的全屏轮播,实际上就是我们常用的950尺寸的普通轮播加宽后的效果,因为你的显示器宽度肯定大于950像素。假设你的显示器宽度是1300像索,那么很显然950像素的轮播显然不叫全屏,如下图

淘宝店铺装修如何实现全屏轮播

很显然。如果我们的轮播宽度加宽到1300。就刚好占满您显示器的可视区域,这样一来就实现了全屏效果,如图所示

淘宝店铺装修如何实现全屏轮播

 

这就是我们要的最终效果。先理解-下,不急~

 

OK,那么回到代码编写上,我们已经有了position:absolute那么我们直接把上述代码放到自定义模块后的效果就成了下图所示

 

淘宝店铺装修如何实现全屏轮播

察觉到了吧,我们加了position:absolute属性的模块,并没有居中,这是因为我们的店铺已经是950[9域且居中在显示器正中间,而我们的模块是在店铺里面,所以我们的模块就靠在了已经剧中的950范围的左边,而我们要做的,仅仅只是再将我们的模块向左拉一定像素值。就实现了居中的全屏轮播了,那么拉多少呢?代码怎么写呢?

 

计算公式:(模块全宽一布局宽度)/2=需要拉动的像素值

 

举例来说:

 

模块全宽:(就是你全屏轮播的的宽度)假设是2000宽(我一直在用的数值,原因最后说明)

 

布局宽度:集市店是950像索,天猫是900像素

 

那么结果就是:《2000-950)/2=525《这里的结果是负数因为是反方向拉动)

 

代码怎么写?很简单,在第三个div标签里直接写上style=” left:-525px”就搞定了。当然,模块是有高度的。我们的高度就加在第二个div上。如图所示

 

淘宝店铺装修如何实现全屏轮播

最终节:全屏轮播初始代码解析

 

上面的代码是突破950的基础结构代码,也就是说。你不想用全屏轮播,只要有上面的代码。你就能实现自定义布局宽度本章主要讲全屏轮播。我们来看看最后的全屏轮播代码是怎么样的(网上购买的代码都是一些很长的代码,里面包含很多无用的语句,发呢影响了网页浏览和载入的速度流杨度)

 

 

淘宝店铺装修如何实现全屏轮播

 

友情提示:

 

1:前面说到这种不用CSS的轮播模块有缺点,缺点就是position:absolute是靠淘宝组件引入。那么就意味着,我们要多次调用淘宝组件来实现全屏效果,这是不利于网页浏览速度的。严重的会造成JS死循环等等问题。所以推荐还是购买官方的CSS功能(有点贵就是了,但是能实现更多的效果)。

 

2:关于全屏的宽度定多少好呢?我的答案依然是2000像索,因为我的显示器宽度是1920像素,而有些用户的宽度会更高,所以,考虑用户发盖率,我就比我的屏幕再高一点,但要理解。全屏轮播再怎么宽,主要可视内容依然是950范围内,区域部分知识为了好看而存在试试视觉体验不同而已。

 

最后将代码给大家贴出来:

 

    

 

 

config=”{‘effect’:’fade’,’hasTriggers’:false,’contentCls’:’desi

 

gn61′}” data-widget-type=”Tabs”>

 

 

    

 

 

config=”{‘effect’:’fade’,’contentCls’:’pics’,’hasTriggers’:fals

 

e,’autoplay’:true,’viewSize’:[2000]}” data-widget-

 

type=”Carousel” style=”left:-505px;”> 

转载于:https://www.cnblogs.com/xiamicomeon/p/4244727.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/25564.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注