前面的文章我們已經介紹過天貓店鋪輪播代碼的組成部分是由:
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樣式帶來的動態效果部分,前提都是你的店鋪有購買這個權限。
若有需要完整代碼的小夥伴幫忙留下你寶貴的評論並且私信,我會把完整代碼發給你們。感謝大家對自媒體的支持!
(本文所涉及到的素材版權,圖片和代碼歸原創者所有,不做商業用途,僅做學習之用)
閱讀更多 學以事用 的文章