不知道大家有沒(méi)有發(fā)現(xiàn)，我們的圖片輪播區(qū)塊是一個(gè)非常好的展示方式，他可以讓顧客更加直觀的看到我們賣(mài)家店鋪里主推的寶貝，就因?yàn)檫@樣，幾乎90%的店鋪里都會(huì)運(yùn)用到輪播圖片展為這一模塊，可是，受到官方制定好的模塊束縛，我們的輪播展位區(qū)塊最多最多只能放5張展示圖，無(wú)法自由控制輪播時(shí)間等等，下面，我就帶領(lǐng)大家脫離束縛，自由化我們的輪播展位區(qū)塊，讓它變得更實(shí)用，更好玩！

--------------------------- 自由化輪播區(qū)塊的好處---------------------------

1——無(wú)限制輪播圖片張數(shù)，如果設(shè)計(jì)得好，將利用輪播區(qū)塊最大力度的發(fā)揮出你寶貝的吸引力，吸引買(mǎi)家眼球！

2——自由控制輪播時(shí)間，僅需設(shè)置你所希望的輪播時(shí)間，即可自由控制寶貝切換的頻率（在此要說(shuō)明的是原版輪播模塊無(wú)法控制時(shí)間，制定的是5秒切換制，導(dǎo)致寶貝還沒(méi)有切換到下一張寶貝圖，顧客已經(jīng)將其忽略了）

3——由于自由化輪播區(qū)塊完全屬于代碼組成，就意味著我們能夠自由的將其縮放，改變其寬度，讓它隨心所欲的出現(xiàn)在你想讓它出現(xiàn)的位置，配合其他模塊代碼，構(gòu)建出新的展示板塊區(qū)域（關(guān)于構(gòu)建，將在以后的課程中公布）

4——自由開(kāi)關(guān)默認(rèn)的 控件按鈕，真正做到自由化輪播模塊

PS：由于這次教學(xué)多半涉及到代碼，對(duì)于新手賣(mài)家來(lái)說(shuō)，可能會(huì)覺(jué)得很難，呵呵，不過(guò)沒(méi)關(guān)系，我自己就是個(gè)新手，不是什么大師，只是普通的小毅，任何一種編程語(yǔ)言我都不會(huì)，但我肯鉆研，發(fā)掘，所以呢，大家不用覺(jué)得難，如果我可以弄懂，那么聰明的各位一定也能學(xué)會(huì)，來(lái)！我們開(kāi)始吧~

---------------------------教學(xué)開(kāi)始-------------------------

首先，為了讓代碼變得讓各位覺(jué)得通俗易懂，我將代碼上了色，更加好看，更好分辨，如下圖所示

看到了嗎？呵呵，下面我就來(lái)講解這串代碼：

⒈ 紅色部分——完全不用您修改的部分，您可以直接無(wú)視（主要是一些調(diào)出來(lái)官方源碼，高手可以自己研究一下，呵呵）

⒉ 綠色部分——

①注釋1：用來(lái)改變你要的輪播模塊的高度，你只需把綠色部分的“320”修改成你要的數(shù)值就行了，其他的不管

②注釋2：用來(lái)改變你要的輪播切換時(shí)間，你只需把綠色部分的“1”修改成你需要的數(shù)值就行了，“1”代表一秒，以此類(lèi)推

⒊ 藍(lán)色與紫色部分—— 不難看出，以上顯示的代碼一旦運(yùn)用起來(lái)，就完成了7張圖片輪播，很顯然已經(jīng)實(shí)現(xiàn)了突破5張約束目的

如何修改呢？——我們先只看第一個(gè)藍(lán)色塊（藍(lán)塊和紫塊都是一樣的，只是我用顏色區(qū)分，方便理解），它代表的是輪播時(shí)第一張圖的信息代碼

⑴ 代表的是：你所展示的圖片的高度，如需修改，你只需把“350”修改成你要的數(shù)值就行了，其他的不管

⑵代表的是：寶貝轉(zhuǎn)到的地址，你只需把“第一張圖的連接地址”這幾個(gè)字修改成你要的跳轉(zhuǎn)地址就行了，引號(hào)保留

⑶代表的是：所展示的圖片地址，你只需把“第一張圖的圖片地址”這幾個(gè)字修改成你上傳到淘寶空間對(duì)應(yīng)的地址就行了，引號(hào)保留

按照以上步驟替換完對(duì)應(yīng)的地址就可以了

--------------------增加與減少展示圖片的方法----------------------

這時(shí)大家可能會(huì)問(wèn)了，如果不需要那么多展示圖或者需要更多的展示圖，我們?cè)撛趺醋瞿兀亢呛牵芎?jiǎn)單，仔細(xì)觀察，其實(shí)藍(lán)色和紫色塊代碼都是一樣的，也就是說(shuō)，想要減少展示圖片，只需要?jiǎng)h除其中一個(gè)藍(lán)色或者紫色塊所對(duì)應(yīng)的代碼，反之，如果想增加展示圖，我們就可以增加藍(lán)色或者紫色塊所對(duì)應(yīng)的代碼，增加的越多，所展示的圖片就越多，為了讓大家更直觀了解，我放兩張顯示圖

呵呵，看懂了嗎，就是這樣以此類(lèi)推，達(dá)到無(wú)限制的自由控制增加輪播圖片

來(lái)看看效果怎么樣~

---------------------附件篇---------------------

代碼下載地址——http://u.115.com/file/f23212e2b0# （里面包含顯示控件按鈕和不顯示控件按鈕的代碼，修改方式都是一樣的~）

代碼安裝教程——http:///zhuangxiu/jiaocheng/2866.html

講到這里，今天的課也就結(jié)束了，利用自由化輪播展位，以后我還會(huì)教大家不再輪播單純的圖片，而是輪播商品展位等等你想不到的有趣想法，也請(qǐng)大家繼續(xù)關(guān)注我~

快消品貨源網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來(lái)源： 普通店鋪利用CSS特效實(shí)現(xiàn)自由化輪播展位