淘寶全屏輪播海報製作

淘寶店鋪首頁全屏輪播海報顯得很大氣,有木有,但是很多製作軟體是要花錢的,這裡給大家何自己製作全屏海報輪播,免費的噢。

工具/原料

Photoshop軟體,一切可以用來編輯圖片的軟體都可以呢。。
當然還要有個淘寶店鋪

方法/步驟

用ps製作寬度為1920px的高度500px的海報。製作兩張或者兩張以上,當然一張也是沒有問題的,就是看不出輪播效果。。哈哈

將圖片上傳至圖片空間

新建一個文本文檔(也可以用dreamweaver新建一個htm文檔),粘貼以下代碼。

在空白文檔里粘貼以下代碼

<div class="J_TWidget" data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'piao1365065449925fu'}" data-widget-type="Tabs">

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

<div class="J_TWidget" data-widget-config="{
           'contentCls': 'slide-kun1365065449925content',
           'triggerCls': 'slide-kun1365065449925triggers',
           'navCls': 'slide-kun1365065449925triggers',
           'triggerType': 'mouse',
           'effect': 'scrollx',
'prevBtnCls':'prev',
'nextBtnCls':'next',
           'steps': 1,
           'autoplay': true,
'viewSize':[1920],
           'circular': true
       }" data-widget-type="Carousel" style="margin: 0px; padding: 0px; left: -180px; top: 0px; width: 1920px; z-index: 10;">

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

<div class="prev" style="width: 90px; height: 90px; float: left;">

<img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/113535006/TB2S4eFXVXXXXX6XpXXXXXXXXXX_!!113535006.png" /></div>

<div class="next" style="width: 90px; height: 90px; margin-left: 950px;">

<img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/113535006/TB2Li5HXVXXXXbIXXXXXXXXXXXX_!!113535006.png" /></div>

</div>

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

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

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

<a href="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg" width="11920" /></a></li>

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

<a href="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg" width="1920" /></a></li>

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

<a href="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg" width="1920" /></a></li>

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

<a href="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank"><img border="0" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg" height="500" width="1920" /></a></li>

</ul>

</div>

<ul class="slide-kun1365065449925triggers" style="margin: 0px; padding: 0px; display: none;">

<li>

&nbsp;</li>

<li>

&nbsp;</li>

<li>

&nbsp;</li>

<li>

&nbsp;</li>

</ul>

</div>

</div>

從圖片空間複製相應的圖片的連結,替換以上代碼中的圖片地址。圖片的連結網址也替換城你自己的連接地址。

替換完畢,打開淘寶店鋪,點擊店鋪裝修,添加自定義模版,編輯自定義模版,點擊代碼模式,將剛才編輯完的整段代碼複製到代碼框裡,點確定、發布,大功告成

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