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

一段特效代碼,輕鬆突破淘寶店鋪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分別改成點擊圖片後進入的頁面地址。

6

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

點擊發布。

相關文章

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

    一段特效代碼,輕鬆突破淘寶店鋪950的限制實現帶縮略圖的全屏輪播特效. 工具/原料 淘寶旺鋪專業版 全屏輪播代碼 方法/步驟 登陸淘寶旺鋪專業版帳號,進入店鋪裝修後台. 在950自定義模塊下,添加模塊 ...
  2. 淘寶店鋪旺鋪專業版全屏輪播製作圖文教程

    本教程是針對那些沒有多少淘寶店鋪裝修經驗的小白們,一些小賣家自己開的店鋪,沒有太多資金花錢讓第三方服務來裝修自己的店鋪,但是自己對裝修用的代碼又不是很了解,下面這個教程詳細介紹了淘寶店鋪旺鋪專業版全屏 ...
  3. 淘寶專業版全屏輪播海報免費製作

    淘寶店鋪來個全屏海報無疑是特別棒的,但是幾乎所有的製作軟體都是要花錢的,這裡給大家教如何自己製作全屏海報輪播. 工具/原料 ps 淘寶店鋪 方法/步驟 找到喜歡的圖片,用ps製作成為寬度為1366的高 ...
  4. 怎麼裝修阿里巴巴旺鋪的「全屏輪播海報」

    阿里巴巴是B2B的商業模式,與淘寶是同一個公司旗下的平台,大多數商家會在阿里巴巴做批發或者是代理,那麼如何裝修阿里里的店鋪呢!下面小編將"全屏輪播"的裝修步驟分享給大家!GO-- ...
  5. 淘寶店鋪旺鋪專業版全屏通欄店招製作方法

    最新版淘寶開店旺鋪專業版全屏通欄店招製作方法: 方法/步驟 第一種方法,就是選擇通欄的模板直接使用,然後在之後純色背景的店招,添加使用就可以啦: 可以通過賣家中心找到店鋪裝修,點擊進入到店鋪裝修的界面 ...
  6. 淘寶全屏輪播海報製作方法以及代碼

    有些淘寶朋友可能買的是簡易的模版,或者是為了省錢,不去買裝修模版,只是用官方默認的,這時的問題就來了,簡易的和官方的都是超簡單,沒 方法/步驟 要實現大海報的輪播 不要顯示 粘貼代碼 <div ...
  7. 【更新】關於淘寶店鋪全屏輪播圖製作代碼的方法

    文 | 木凡大人 經網友提示,之前在分享的輪播圖製作方法的連結已經不能使用.(很多人都說我打廣告,人家變成垃圾網站,我能怎麼辦?我也很絕望啊!) 今天@木凡大人 就重新推出另一個更好用的網站與大家分享 ...
  8. 關於淘寶店鋪全屏輪播圖製作代碼的方法

    提示:經過網友提示,本教程已經無法使用,請關注下本人的微博@木凡大人,還是這個頭像哦! 已經有最新教程呈上,更加容易便捷!咱們都是愛學習的人!加油! 工具/原料 電腦.人 方法/步驟 首先打開製作網站 ...
  9. 淘寶店鋪裝修如何擁有旺鋪專業版

    首先說明一點,淘寶旺鋪專業版對於一鑽一下是免費的,一鑽以上,每月50元,建議新手賣家一定要珍惜機會,下面就告訴大家如何免費使用. 工具/原料 有一個淘寶帳號並開通賣家功能 方法/步驟 首先百度搜尋&q ...
  10. 淘寶網店裝修如何製作旺鋪招牌 教程分享

    很多人申請旺鋪了,店鋪里的寶貝圖片以大圖的方式顯示出來,店鋪整體上看也有點商城店鋪的味道.但現在旺鋪的裝修費實在太貴,少則八九十,多則好幾百,這對於普通賣家來說是個不小的數字,有的人可能只是想體驗一下 ...
  11. 怎麼樣製作淘寶或者天貓首頁全屏輪播效果

    我們在裝修淘寶或者天貓店鋪時,首頁輪播動畫效果製作都是比較麻煩的.一般都是寫代碼製作,但是能自己寫代碼,早就做碼農了,還做啥設計師,我這裡介紹一個傻瓜式的全屏輪播生成神器.我使用的是神碼裝修工具 工具 ...
  12. 淘寶全屏輪播海報製作

    淘寶店鋪首頁全屏輪播海報顯得很大氣,有木有,但是很多製作軟體是要花錢的,這裡給大家何自己製作全屏海報輪播,免費的噢. 工具/原料 Photoshop軟體,一切可以用來編輯圖片的軟體都可以呢.. 當然還 ...
  13. 淘寶店鋪全屏輪播圖製作代碼方法【視頻教程】

    免費方法,支持淘寶旺鋪[基礎版]和[專業版] 淘寶店鋪全屏輪播圖製作代碼方法[視頻教程] 工具/原料 Photoshop Dreamweaver 軟體如不知道下載或安裝可以看視頻 方法/步驟 首先安裝 ...
  14. 怎麼製作淘寶全屏輪播海報(圖解)

    簡單細緻的介紹怎樣製作淘寶店鋪全屏輪播海報,小賣家也可以免費製作高大上的海報了,讓店鋪瞬間升級喲... 方法/步驟 登陸千圖網,搜尋"淘寶全屏輪播海報",尋找自己所要的素材模板. ...
  15. 淘寶C店全屏輪播大海報 代碼 帶縮略圖

    很多店家在裝修店鋪的時候都很喜歡全屏輪播大海報,但是苦於模版現在不是永久的,要每個月都要續費才可以用,還不如自己找一段全屏輪播大海報代碼. 下面跟大家分享一下淘寶C店全屏輪播海報帶縮略圖代碼. 工具/ ...
  16. 淘寶全屏輪播海報代碼

    我們看到很多淘寶店的首頁海報都是全屏的,這種海報是怎麼做出來的呢?下面讓我們一起來看看吧! 工具/原料 PS 淘寶店鋪 步奏 選擇好自己要放在首頁的海報(一般兩張就可以了) 把要上傳到首頁的海報上傳到 ...
  17. 淘寶店集市店天貓店全屏代碼尺寸可修改首頁裝修

    淘寶店鋪首頁裝修經常受到950像素尺寸的限制,現在我交給大家一種代碼可以突破自定義模板的限制,簡單好用. 工具/原料 對ps有基本的了解,會基本的dw操作 簡單易懂,會粘貼複製即可 方法/步驟 < ...
  18. 淘寶店鋪首頁全屏輪播圖製作

    很多朋友都想要做全屏輪播圖,接下來我來說說我的經驗 工具/原料 美圖秀秀 方法/步驟 1.首先要製作或者搜尋圖片寬度1920高度610的高畫質圖片 2.上傳到淘寶圖片空間,並複製其連接 3.將複製的連 ...
  19. 如何裝修淘寶2012版新旺鋪專業版店鋪詳細過程

    在淘寶上開店,是件很容易的事情.但是對於剛接觸淘寶的新手來說,(裝修店鋪是項很煩鎖的事.如里沒有多餘的時間,也可以直接花錢找人做這件事. 接下來小編為大家講解,最新2012旺鋪專業版的裝修過程. 工具 ...
  20. 淘寶全屏輪播代碼如何設置的簡單方法

    代碼沒有多複雜,多實驗幾回就能理解這段代碼的意思了,就不相信說明了,替換代碼中的中文就可以用,實現簡單的全屏輪播代碼 準備工作 然後將下列代碼進行編輯,如:"圖片地址1"在淘寶圖片 ...