返回列表

作者:巨人電商

淘寶圖片輪播代碼 漸變和上下效果代碼

POST TIME:2020-10-25

淘寶裝修免費(fèi)模板發(fā)現(xiàn)很多人都喜歡淘寶圖片輪播,我們?cè)诠湔搲臅r(shí)候也發(fā)現(xiàn)好多網(wǎng)店都運(yùn)用到了這一點(diǎn),在這里淘寶學(xué)堂和大家分享一個(gè)通用的淘寶圖片輪播代碼,只要是淘寶旺鋪均可使用,該代碼可單獨(dú)使用,也可以嵌套在自己的模板中,代碼可以左側(cè)自定義、右側(cè)自定義、中間自定義模塊。

第一:淘寶輪播代碼漸變效果

<div class="slider-promo J_Slider J_TWidget" data-widget-config="{\&;effect\&;:\&;fade\&;,\&;contentCls\&;: \&;lst-main\&;, \&;navCls\&;: \&;lst-trigger\&;, \&;activeTriggerCls\&;: \&;current\&;}" data-widget-type="Slide" data-type="fade"> <p>&nbsp;</p> <p>&nbsp;</p> <ul class="lst-main">     <p>&nbsp;</p>     <p>&nbsp;</p>     <li><a target="_blank" href="商品連接地址"><img alt="" src="圖片地址" /></a>     <p>&nbsp;</p>     <p>&nbsp;</p>     </li>     <li><a target="_blank" href="商品連接地址"><img alt="" src="圖片地址" /></a>     <p>&nbsp;</p>     <p>&nbsp;</p>     </li> </ul> </div> 

第二:淘寶圖片輪播展示上下變換效果代碼

<Table width=750>

<DIV class="box J_TBox"><DIV class=shop-slider><DIV class=bd><DIV class="slider-promo J_Slider J_TWidget" style="HEIGHT: 450px" data-type="scrolly" data-widget-type="Slide" data-widget-config="{\&;effect\&;:\&;scrolly\&;,\&;contentCls\&;: \&;lst-main\&;, \&;navCls\&;: \&;lst-trigger\&;, \&;activeTriggerCls\&;: \&;current\&;}"><ul class=lst-main></DIV></Table>

注意:此模式圖片寬度不能小于750像素,否則留白很大。代碼中藍(lán)色部分為圖片地址,可以替換自己制作的存放在圖片空間中的輪播圖。紅色部分為圖片所示寶貝的詳情頁面。

備注:此代碼在IE瀏覽器上不能復(fù)制時(shí),可選擇其他瀏覽器,比如谷歌瀏覽器。