電商代碼：天貓輪播代碼的基本構造詳解

天貓店鋪的設計當中，曾經的開發者們一定是經過了非常多的考究，才得出如今豐富多變的輪播特效（也許是為了模板開發的考慮），在我一個外行看來，天貓商城的出現，它的成就不言而喻了。在之前發表的文章中不是很清晰地介紹輪播代碼的結構，現如今再詳細介紹。

對于很多前輩來說，這個很簡單，而對于懂點HTML的小白來說，也許，這個不是很清楚。

我們一般習慣稱為輪播代碼，而在天貓的官方叫法中是稱之為旋轉木馬，是由英文單詞Carousel 而直譯過來。看到很多輪播代碼都會有這個data-widget-type=”carousel”，這個翻譯過來大概就是：數據庫的類型是旋轉木馬，也就是輪播代碼。象這種類型的庫還有另外5種：

Tabs - 標簽頁
Slide - 卡盤
Accordion - 手風琴
Popup - 彈出層
Compatible - 兼容性組件

這5種使用的頻率不是很多，但是也有人用過，其中用的最多，變化最多的也就是旋轉木馬了。它的結構如下：

</div>

</ul>

</div>

組件的調用方法：

就是data-widget-type里面的參數和參數值

<div class="section J_TWidget"> 其中的J_TWidget這個天貓官方寫的庫文件的名字，這個庫文件里有你需要調用的參數，就是那些duration(動畫時長)，interval（輪播的時間間隔-這個在參數里沒有，一般是有的），viewSize:可見視圖的大小等等。

還有不變的東西有，也就是官方命名的，不能任意修改的名字有：<div class="ks-switchable-content"></div>和<ul class="ks-switchable-nav"></ul>這個名字就是里面的class，是不能修改的，官方已經定義的了。

這就是最基本的構造參數，正式由這種構造參數會衍生出各種各樣的特效。組件的參數可以自由的選擇。就是這樣的組件可以演變出很多種特效的方式：兩個旋輪播代碼的結合使用（各自有各自的參數結構，大圖展示，箭頭，和焦點）；兩個輪播代碼共用一個焦點，一個對箭頭；一個X軸方向的輪播和另一個Y軸方向輪播的結合；一個輪播只用焦點部分，不用輪播內容的那部分等等，這些后續都會發文介紹，理論的東西相信大家看得有些枯燥，后續會發文和視頻結合講解天貓的旋轉木馬是有多強。

天貓商城的建立，開啟了互聯網的競相發展，之后京東，蘇寧，唯品會等等也群雄并起，給我們這個時代注入了更多的新名詞，如：電子商務，網購，網店，快遞，物流等等。

隨著電子商務的蓬勃發展催生了各種各樣的工作崗位：運營，推廣，活動策劃，設計，美工，攝影，客服，物流等。然而，這個時代，他們都要以銷售為目的而開展工作。

很有幸，遇上了自己喜歡的事情，也從當初的小白變成了小油條了，有幸遇上了天貓店鋪的強大輪播功能！曾經很瘋狂為之迷醉。

一個輪播代碼盡然能創造出如此多的特效和功能，在此，我寫這些文章的初衷是給予那些想要在這方面有所進步的愛好者看的，也許我的看法存在一定的水平，如果有大神，還望請多指教更正。

好了，開頭的話就不多說，現在正式進入正題。

天貓店鋪的輪播代碼究竟是怎樣的代碼呢？代碼有很多種，比如：C++，PHP，JAVA，CSS等等，我具體要講的就是CSS和html，另外可能會附帶些Javascript，由于本人是自學的，所以只學了點CSS和html的皮毛，雖然是皮毛，但希望多少能給你們想學的，正在學的后來人一點幫助，讓你們少走點彎路，如果想學這些，就要盡早下定決心，如果想放棄，可以盡早，說句題外話，從事代碼工作的，確實跟學醫一樣，要學的東西很多，不過道路也是很艱辛的，尤其不是科班出身的。

好了，話題扯遠了，言歸正傳。

如今，天貓和淘寶店鋪的代碼已經很成熟了，曾經的PC端是那么如火如荼，如今手機端的興起，更是襯托了PC端已經不那么重要，雖然如此，PC端仍然有借鑒和參考的用途。從事過美工設計的同行們也許都知道，要裝修網店，必須多多少少知道點HTML，甚至CSS，在最初的時候，美工設計們切圖的方式還是以tr,td表格的形式出現，如今更多是以DIV和li標簽的出現，學過一點HTML的都知道，他們是網頁語言的標簽，是成對出現的。即<div></div><li></li>等。

天貓和淘寶輪播代碼由設計師支配自由書寫的地方有兩大組成部分，就是CSS和HTML(前提是店鋪購買了CSS權限，在天貓和淘寶是需要花錢購買的，這一點不同于京東和蘇寧，后兩者是免費的)，一般大的店鋪都有購買，比如：韓都衣舍，天之眼等等。天貓的輪播圖片代碼一般都是由焦點大圖，箭頭，輪播序號或者小焦點組成。例如：

3張1920PX寬的大海報，左右箭頭，三個小焦點

</li>

</li>

</li>

</li>

</ul>

</div>

</ul> //控制圖片最下方的四個小點

</div>

一般輪播代碼的基本組成部分都是由關鍵的四部分組成：1.data-widget-type參數部分，這里的參數部分基本都是這幾個，'viewSize':[1920]指的是輪播的大小，disableBtnCls':'disable',表示按鈕不可用時的class值。還拿旋轉木馬來說吧，輪播兩側有2個翻頁的按鈕：prev和next，你一直按next，輪播到最后一張，已經沒有了，不能輪播了，這個時候的Class值，也就是disable的樣式，是按鈕變成灰色呢，還是按鈕變成其他的樣式呢？，這個disable是可以自由命名的。'effect':'fade'指的是輪播的方式是漸隱的方式，后面還會有以X軸和Y軸移動的方式，這個參數不多說，以后還會遇到。2.<ul class="myksc-content"> 控制banner圖，也就是海報的輪播內容的，3.class="myshb-nav"控制數量的小焦點或者小焦點圖，4.class="prev disable" 和class="next"是控制上一張和下一張的箭頭。無論各式各樣的輪播圖組合，最基本的四點是必不可少的（另外其他不在設計師控制的<head>部分的除外，包括控制大小，位置的CSS和JavaScript）。

這就是最初天貓淘寶給商家最初的輪播樣式，后來越來越多的網頁設計師，前端設計師，店鋪模板設計師涌入這個行業，就衍生出了好多風格各異的輪播圖和多個輪播組合，我將會在下一期中再來慢慢介紹，介紹天貓利用Widget庫能夠變化出多少輪播特效代碼出來。

（圖片來自于互聯網，僅供做學習交流使用，不做商業用途，版權歸屬圖片版權方）

誼Phill

輪播圖在我們的web項目中有著廣泛的運用，特別是在商城項目中，通常用于對新品、熱銷、促銷等產品的推薦，重要的站點公告也可以采用輪播圖的方式呈現。現在實現輪播圖有各種各樣的第三方插件可以用，哪怕是一個完全不懂javascript或者jQuery的新手，也能實現輪播的效果；但是，作為一個初學者，我們還是要稍微了解一下原理（大神請無視）。

實現輪播的手段其實有很多，比如移動圖片的位置、設置圖片的顯示隱藏等都可以實現輪播切換效果，這里，我們簡單演示移動圖片距離的方式實現輪播效果。

首先編寫html頁面并配合簡單的css樣式，代碼如下：

效果如圖1所示：

我們實現輪播主要是要橫向移動圖片的位置，所以要將圖片浮動成一排，并且要隱藏多余的部分，只顯示出一張圖片，補充css如下：

如圖2所示：

現在我們只能看到一張圖片，其余的因為超出.slider-box的范圍而被隱藏，如下圖3所示：

其實移動圖片的原理很簡單，我們只需要不斷改變ul的left值就可以，如下圖4所示：

現在我們需要使用jQuery來不斷的改變這個left值。

首先，引入jquery-3.2.1.min.js；jq代碼如下：

刷新頁面，效果如圖5所示：

但是，圖片的切換是一瞬間完成的，而且只有一次，并沒有輪播，所以，這并不是我們想要的效果。輪播肯定是有規律的隨著時間變化而依次播放，所以，根據之前我們在《javascript動畫基礎》中講解的，我們必須結合時間函數以及時間增量完成動畫效果。

修改以上jq代碼：

效果如圖6所示：

現在雖然可以按照時間間隔切換圖片，但是在最后一張切換完成后，程序并沒有停止或者復位圖片，而是繼續在向后移動ul，所以出現了空白的情況，因為我們每次移動的距離為1920px剛好為圖片的寬度，實際上圖片只需要切換2次就可以到達第3張，再切換的話就會出現空白，我們需要先判斷left的是否已經為3張圖片的寬度總和，即left+5760是否等于0(left為負值)，如果等于0，那么我們需要將ul的left值設置為0，再從頭開始切換，修改代碼：

效果如圖7所示：

現在圖片只要切換到最后一張，將不會繼續往后切換，而是回到第一張圖片，重頭切換。我們也可以使用jQuery提供的animate()方法，讓我們能看到圖片從右向左的切換過程：

效果如圖8所示：

那么，一個簡單的輪播圖，我們就完成了。實現輪播的方式很多，這里只是提供一個最基本的思路。喜歡的朋友可以點個關注，后期我們會放出進階視頻。

在線咨詢

上一篇：HTML、HTML5重難點
下一篇：十倍提升！JS代碼運行效率的技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

電商代碼：天貓輪播代碼的基本構造詳解

您的項目需求