淘寶店裝移植有一個(gè)神秘的模塊，那就是—全屏輪播，這個(gè)神奇的模塊，能提高店鋪的檔次，給與顧客視覺沖擊，提升顧客印象但是由于淘寶常規(guī)用戶不支持CSS（用來定義網(wǎng)頁樣貌的能力)，所以我們無法用簡(jiǎn)單的div+CSS來做出屬于自己的全屏輪播強(qiáng)大的裝修師們幾經(jīng)研究，終于擺脫了CSS的束繃，結(jié)合淘寶的輪播組件，單靠DIV代碼就實(shí)現(xiàn)了全屏輪播(有缺點(diǎn))
那么。不要CSS，我們?cè)趺磳?shí)現(xiàn)全屏輪播呢?
首先我要告訴大家全屏輪播的核心CSS屬性—position:absolute
第一節(jié) :核心屬性
position:absolute>可以把它理解為定位，讓我們的輪播能擺脫位置的束縛，只要有了它，全屏就不是問題，但是淘寶為了網(wǎng)頁安全，限制了這個(gè)屬性，在我們的自定義模塊(用來存儲(chǔ)自己的代碼的模塊》寫入這個(gè)屬性的時(shí)候，系統(tǒng)會(huì)直接給我們刪掉，這就是為什么我們?nèi)绻麤]有CSS權(quán)限就無法使用全屏輪播的首要原因.
后來根據(jù)研究。在調(diào)用淘寶的輪播組件>(官方開源JS模塊。也就是常用的普通輪播)代碼的時(shí)候，頁面會(huì)自動(dòng)為組件內(nèi)的代碼，置入一個(gè)position:absolute屬性，這樣說很難理解。我們直接上圖說明吧!
第二節(jié) :結(jié)構(gòu)原理
有了核心屬性，接下來就是讓他全屏了。所謂的全屏輪播，實(shí)際上就是我們常用的>950尺寸的普通輪播加寬后的效果，因?yàn)槟愕娘@示器寬度肯定大于950像素。假設(shè)你的顯示器寬度是1300像索，那么很顯然950像素的輪播顯然不叫全屏，如下圖
很顯然。如果我們的輪播寬度加寬到>1300。就剛好占滿您顯示器的可視區(qū)域，這樣一來就實(shí)現(xiàn)了全屏效果，如圖所示
這就是我們要的最終效果。先理解-下，不急~
OK，那么回到代碼編寫上，我們已經(jīng)有了position:absolute那么我們直接把上述代碼放到自定義模塊后的效果就成了下圖所示
察覺到了吧，我們加了position:absolute屬性的模塊，并沒有居中，這是因?yàn)槲覀兊牡赇佉呀?jīng)是950[9域且居中在顯示器正中間，而我們的模塊是在店鋪里面，所以我們的模塊就靠在了已經(jīng)劇中的950范圍的左邊，而我們要做的，僅僅只是再將我們的模塊向左拉一定像素值。就實(shí)現(xiàn)了居中的全屏輪播了，那么拉多少呢?代碼怎么寫呢?
計(jì)算公式:(模塊全寬一布局寬度)/2=需要拉動(dòng)的像素值
舉例來說:
模塊全寬:(就是你全屏輪播的的寬度)假設(shè)是2000寬(我一直在用的數(shù)值，原因最后說明)
布局寬度:集市店是950像索，天貓是900像素
那么結(jié)果就是:《2000-950)/2=525《這里的結(jié)果是負(fù)數(shù)因?yàn)槭欠捶较蚶瓌?dòng))
代碼怎么寫>?很簡(jiǎn)單，在第三個(gè)div標(biāo)簽里直接寫上style="left:-525px"就搞定了。當(dāng)然，模塊是有高度的。我們的高度就加在第二個(gè)div上。如圖所示
最終節(jié):全屏輪播初始代碼解析
上面的代碼是突破950的基礎(chǔ)結(jié)構(gòu)代碼，也就是說。你不想用全屏輪播，只要有上面的代碼。你就能實(shí)現(xiàn)自定義布局寬度本章主要講全屏輪播。我們來看看最后的全屏輪播代碼是怎么樣的(網(wǎng)上購買的代碼都是一些很長(zhǎng)的代碼，里面包含很多無用的語句，發(fā)呢影響了網(wǎng)頁瀏覽和載入的速度流楊度)
友情提示：
1:前面說到這種不用CSS的輪播模塊有缺點(diǎn)，缺點(diǎn)就是position:absolute是靠淘寶組件引入。那么就意味著，我們要多次調(diào)用淘寶組件來實(shí)現(xiàn)全屏效果，這是不利于網(wǎng)頁瀏覽速度的。嚴(yán)重的會(huì)造成>JS死循環(huán)等等問題。所以推薦還是購買官方的CSS功能(有點(diǎn)貴就是了，但是能實(shí)現(xiàn)更多的效果)。
2:關(guān)于全屏的寬度定多少好呢?我的答案依然是2000像索，因?yàn)槲业娘@示器寬度是1920像素，而有些用戶的寬度會(huì)更高，所以，考慮用戶發(fā)蓋率，我就比我的屏幕再高一點(diǎn)，但要理解。全屏輪播再怎么寬，主要可視內(nèi)容依然是950范圍內(nèi)，區(qū)域部分知識(shí)為了好看而存在試試視覺體驗(yàn)不同而已。
最后將代碼給大家貼出來：
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;">
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
