天貓輪播代碼最基本的結構
由天貓輪播代碼生成優惠券特效的基本結構
前面的文章我們已經介紹過天貓店鋪輪播代碼的組成部分是由：
1.J_TWidget（輪播代碼的各項參數部分）；
2.contentCls（輪播內容的部分，也就是我們平時做的海報，banner大小基本是1920px寬的）；
3.navCls(焦點部分，或者焦點數字)；
4.以及prevBtnCls和nextBtnCls，左箭頭和右箭頭部分。
很顯然，這裡沒有加上箭頭的參數和箭頭的Html部分，因為在這它們不需要，還有輪播內容的部分我們也不需要了，它的樣式display:none;已經說明了一切，確切地說不是不需要，只是需要它的一部分，需要它的結構不需要它的內容。
在整個輪播代碼的整體結構中，真正需要的就是
，也就是這兩個參數：'navCls':'h_nav'和'activeTriggerCls':'h_active'
這個h_active是隨著一定的時間間隔（也就是我們所說的輪播間隔時間即：'interval':2）跳到某一個容器的class裡的，意思就是說，我跳到你容器DIV的class裡，就輪到你展示在人們的視野裡，就該到你表現的時刻了。
在天貓店鋪中，有時候我們可能會添加多個輪播模塊，熟悉天貓店鋪裝修風格的美工設計們就知道這點，所以在h_con下的
ks-switchable-panel-internal2250裡後面的數字2250是可以變的，同理：還有h_nav下的ks-switchable-trigger-internal2249的數字。
如果你在店鋪裡多添加個輪播模塊，那麼這個數字在h_con下可能是3561，h_nav下可能是3560。
下面展示這個旋轉效果的CSS樣式代碼：
.hd_quan0505 .h_item .h_mask{left:0px;top:0;-webkit-transition:2s all;-moz-transition:2s all;-o-transition:2s all;transition:2s all;}
.hd_quan0505 .h_item.h_active .h_mask{transform:rotate(150deg);-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);-o-transform:rotate(150deg);-moz-transform:rotate(150deg);
我大概翻譯下：（針對小白有些基礎，大神或者專業的請繞道走）
第一行：
就是這個容器裡的容器h_mask的樣式是：位置是距左邊0px,距頂部位置0px（這個已經有絕對定位為前提了），變化2秒時間，其中那麼多重複的那是針對不同瀏覽器而書寫的，做前端的都要考慮到不同瀏覽器之間的兼容性。
第二行：
當觸發到這個容器的時候，它所要產生的效果就是旋轉150度，其他那麼多重複也是考慮到不同瀏覽器的兼容性。
這就是天貓輪播代碼中焦點部分navClS結合CSS樣式帶來的動態效果部分，前提都是你的店鋪有購買這個權限。
若有需要完整代碼的小夥伴幫忙留下你寶貴的評論並且私信，我會把完整代碼發給你們。感謝大家對自媒體的支持！
（本文所涉及到的素材版權，圖片和代碼歸原創者所有，不做商業用途，僅做學習之用）
閱讀更多 學以事用 的文章
