【淘寶特效代碼】教你製作旺鋪專業版全屏輪播

一段特效代碼,輕鬆突破淘寶店鋪950的限制實現帶縮略圖的全屏輪播特效。

工具/原料

淘寶旺鋪專業版
全屏輪播代碼

方法/步驟

登陸淘寶旺鋪專業版帳號,進入店鋪裝修後台。

在950自定義模塊下,添加模塊。

新建一個自定義模塊。

以下是縮略圖全屏輪播的代碼:

——————————————————————————————

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'kmcomic'}" data-widget-type="Tabs" style="height:490px;overflow:hidden;" data-title="本代碼由淘寶美工助理·特效代碼生成器自動生成">

<div class="kmcomic" style="height:500px;">

<div class="footer-more-trigger" style="width:1920px;height:500px;top:auto;padding:0px;border:none;left:50%;">

<div class="footer-more-trigger" style="width:1920px;height:500px;padding:0px;border:none;left:-960px;">

<div class="J_TWidget" data-widget-config="{'contentCls': 'kmcomiccontent','navCls': 'kmcomictriggers','effect': 'scrollx','easing': 'elasticOut','prevBtnCls':'prev','nextBtnCls':'next','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel">

<div class="J_TWidget" data-widget-config="{'trigger':'.qplb','align':{'node':'.qplb','offset':[0,-20],'points':['cc','cc']}}" data-widget-type="Popup" style="display:none;">

<div class="prev" style="float:left;font-size:100px;cursor:default;opacity:0.5;color:#F00;">

<span>

<img border="0" height="52" src="http://img04.taobaocdn.com/imgextra/i4/1015393481/T2BUiMXj4bXXXXXXXX-1015393481.png" width="52" />

</span>

</div>

<div class="next" style="margin-left:950px;font-size:100px;cursor:default;opacity:0.5;color:#F00;">

<span>

<img border="0" height="52" src="http://img03.taobaocdn.com/imgextra/i3/1015393481/T2V9D_Xi4aXXXXXXXX-1015393481.png" width="52" />

</span>

</div>

</div>

<div class="qplb" style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;">

<ul class="kmcomiccontent" style="height:500px;width:1920px;padding:0px;margin:0px;">

<li style="width:1920px;height:500px;padding:0px;margin:0px;">

<span>

<a style="padding:0px;margin:0px;" a href="連結1" target="_blank">

<img border="0px" height="500" src="圖片1" width="1920" />

</a>

</span>

</li>

<li style="width:1920px;height:500px;padding:0px;margin:0px;">

<span>

<a style="padding:0px;margin:0px;" a href="連結2" target="_blank">

<img border="0px" height="500" src="圖片2" width="1920" />

</a>

</span>

</li>

</ul>

</div>

<div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">

<div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background:url(http://img01.taobaocdn.com/imgextra/i1/1015393481/T2mwjGXApXXXXXXXXX-1015393481.png) repeat;top:453px;">

<ul class="kmcomictriggers" style="width:950px;height:50px;margin:0 auto;text-align:center;">

<li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">

<span>

<img border="0px" height="39px" src="圖片1" style="vertical-align:middle;margin:5px 0;" width="120px" />

</span>

</li>

<li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">

<span>

<img border="0px" height="39px" src="圖片2" style="vertical-align:middle;margin:5px 0;" width="120px" />

</span>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<ul class="ks-switchable-nav" style="display:none;"></ul>

</div>

將上述代碼複製到記事本中,修改代碼中的圖片和連結地址。

將圖片1、圖片2分別改成淘寶圖片空間中,1920x500px尺寸的海報圖片地址。

將連結1、連結2分別改成點擊圖片後進入的頁面地址。

複製修改好的代碼,粘貼到店鋪的自定義內容區。

點擊發布。

下面是最終效果。

注意事項

店鋪必須是未購買包月模板的淘寶旺鋪專業版。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場