AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 電商

淘寶全屏輪播海報制作方法以及代碼?

來源: 責編: 時間:2023-11-09 12:32:22 232觀看
導讀第一步,我先把代碼貼出來。如下:<divclass="J_TWidget"data-widget-config="{&#39;effect&#39;:&#39;fade&#39;,&#39;circular&#39;:true,&#39;contentCls&#39;:&#39;taobaoux&#39;}"data-widget-type="Tabs"styl

第一步,我先把代碼貼出來。如下:<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'taobaoux'}"data-widget-type="Tabs"style="height:490px;overflow:hidden;"><divclass="taobaoux"style="height:380px;"><divclass="sn-simple-logo"style="width:990px;height:380px;top:auto;padding:0px;border:none;left:97%;"><divclass="sn-simple-logo"style="width:990px;height:380px;padding:0px;border:none;left:-960px;"><divdata-widget-config="{'contentCls':'taobaoux-com','navCls':'bbs-taobaoux-com','effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay':true,'viewSize':[990],'circular':true}"data-widget-type="Carousel"class="J_TWidget"><divclass="J_TWidget"data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"></div><divclass="J_TWidget"data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"></div><divstyle="height:380px;width:990px;overflow:hidden;padding:0px;margin:0px;"class="ux1920"><ulclass="taobaoux-com"style="height:550px;width:990px;padding:0px;margin:0px;"><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="圖片一"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="圖片二"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="圖片三"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="圖片四"width="990px"height="380px"border="0px"></a></li><listyle="width:990px;height:550px;padding:0px;margin:0px;"><atarget="_blank"href="#"style="padding:0px;margin:0px;"><imgsrc="圖片五"width="990px"height="380px"border="0px"></a></li></ul></div><divstyle="padding:0px;border:none;left:97%;"><divstyle="width:990px;height:110px;padding:0px;border:none;left:-960px;background:url(http://demo.taobaoux.com/Carousel/Carousel_bg.png)repeat;top:505px;"><ulclass="bbs-taobaoux-com"style="width:990px;height:50px;margin:0auto;text-align:center;"><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="縮略圖1"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="縮略圖2"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="縮略圖3"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="縮略圖4"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li><listyle="display:inline;margin:4px;cursor:pointer;line-height:50px;"><imgsrc="縮略圖5"width="190px"height="100px"border="0px"style="vertical-align:middle;margin:5px0;"/></li></ul></div></div></div></div></div></div></div>8rI28資訊網——每日最新資訊28at.com

我做的海報長寬是990*380的。算上下面的縮略圖背景高度是110。縮略圖長寬是190*100。如果海報長寬不是這個尺寸的話,是需要修改一下上面的尺寸的。8rI28資訊網——每日最新資訊28at.com

然后把做好的圖片海報上傳到圖片空間,獲得圖片網址。并且把獲得的網址對應替換掉圖片。8rI28資訊網——每日最新資訊28at.com

最后復制裝修的自定義模塊。保存發布即可8rI28資訊網——每日最新資訊28at.com

淘寶全屏輪播海報制作方法以及代碼?8rI28資訊網——每日最新資訊28at.com

最后就OK了,具體效果如下。8rI28資訊網——每日最新資訊28at.com

先把圖片上傳到自己淘寶空間里面8rI28資訊網——每日最新資訊28at.com

然后復制圖片地址鏈接,然后打開一秒美工8rI28資訊網——每日最新資訊28at.com

然后填寫對應的地址都填寫上去。最后生成代碼就行了。8rI28資訊網——每日最新資訊28at.com

獲取了代碼然后粘貼到自定義內容就行了源代碼里面哦8rI28資訊網——每日最新資訊28at.com

在裝修店鋪中添加“自定義區”8rI28資訊網——每日最新資訊28at.com

對所彈對話框進行如圖所示的操作8rI28資訊網——每日最新資訊28at.com

將上述設置好的代碼進行粘貼,最后點擊“確定”8rI28資訊網——每日最新資訊28at.com

會看到“自定義區”發生變化8rI28資訊網——每日最新資訊28at.com

最后點擊“預覽”查看最終效果8rI28資訊網——每日最新資訊28at.com

選擇好自己要放在首頁的海報(一般兩張就可以了)8rI28資訊網——每日最新資訊28at.com

淘寶全屏輪播海報制作方法以及代碼?8rI28資訊網——每日最新資訊28at.com

把要上傳到首頁的海報上傳到圖片空間8rI28資訊網——每日最新資訊28at.com

在淘寶首頁添加一個自定義模塊,點擊源碼編輯模式,復制下面的代碼8rI28資訊網——每日最新資訊28at.com

<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'piao1365065449925fu'}"data-widget-type="Tabs"><divclass="piao1365065449925fu"style="height:500px;"><divclass="J_TWidget"data-widget-config="{&#13;&#10;'contentCls':'slide-kun1365065449925content',&#13;&#10;'triggerCls':'slide-kun1365065449925triggers',&#13;&#10;'navCls':'slide-kun1365065449925triggers',&#13;&#10;'triggerType':'mouse',&#13;&#10;'effect':'scrollx',&#13;&#10;&#9;&#9;&#9;'prevBtnCls':'prev',&#13;&#10;&#9;&#9;&#9;'nextBtnCls':'next',&#13;&#10;'steps':1,&#13;&#10;'autoplay':true,&#13;&#10;&#9;&#9;&#9;'viewSize':[1366],&#13;&#10;'circular':true&#13;&#10;}"data-widget-type="Carousel"style="margin:0px;padding:0px;left:-180px;top:0px;width:1366px;z-index:10;"><divclass="J_TWidget"data-widget-config="{'trigger':'.first1365065449925trigger','align':{'node':'.first1365065449925trigger','offset':[0,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"><divclass="prev"style="width:90px;height:90px;float:left;"><imgdata-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/113535006/TB2S4eFXVXXXXX6XpXXXXXXXXXX_!!113535006.png"/></div><divclass="next"style="width:90px;height:90px;margin-left:950px;"><imgdata-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/113535006/TB2Li5HXVXXXXbIXXXXXXXXXXXX_!!113535006.png"/></div></div><divclass="first1365065449925trigger"style="margin:0px;padding:0px;width:1366px;height:500px;overflow:hidden;"><ulclass="slide-kun1365065449925content"style="margin:0px;padding:0px;width:1366px;height:500px;"><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><a><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li></ul></div></div>8rI28資訊網——每日最新資訊28at.com

登陸淘寶旺鋪專業版賬號,進入店鋪裝修后臺。8rI28資訊網——每日最新資訊28at.com

在950自定義模塊下,添加模塊。8rI28資訊網——每日最新資訊28at.com

新建一個自定義模塊。8rI28資訊網——每日最新資訊28at.com

以下是縮略圖全屏輪播的代碼:——————————————————————————————<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'kmcomic'}"data-widget-type="Tabs"style="height:490px;overflow:hidden;"data-title="本代碼由淘寶美工助理·特效代碼生成器自動生成"><divclass="kmcomic"style="height:500px;"><divclass="footer-more-trigger"style="width:1920px;height:500px;top:auto;padding:0px;border:none;left:50%;"><divclass="footer-more-trigger"style="width:1920px;height:500px;padding:0px;border:none;left:-960px;"><divclass="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"><divclass="J_TWidget"data-widget-config="{'trigger':'.qplb','align':{'node':'.qplb','offset':[0,-20],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"><divclass="prev"style="float:left;font-size:100px;cursor:default;opacity:0.5;color:#F00;"><span><imgborder="0"height="52"src="http://img04.taobaocdn.com/imgextra/i4/1015393481/T2BUiMXj4bXXXXXXXX-1015393481.png"width="52"/></span></div><divclass="next"style="margin-left:950px;font-size:100px;cursor:default;opacity:0.5;color:#F00;"><span><imgborder="0"height="52"src="http://img03.taobaocdn.com/imgextra/i3/1015393481/T2V9D_Xi4aXXXXXXXX-1015393481.png"width="52"/></span></div></div><divclass="qplb"style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;"><ulclass="kmcomiccontent"style="height:500px;width:1920px;padding:0px;margin:0px;"><listyle="width:1920px;height:500px;padding:0px;margin:0px;"><span><astyle="padding:0px;margin:0px;"ahref="鏈接1"target="_blank"><imgborder="0px"height="500"src="圖片1"width="1920"/></a></span></li><listyle="width:1920px;height:500px;padding:0px;margin:0px;"><span><astyle="padding:0px;margin:0px;"ahref="鏈接2"target="_blank"><imgborder="0px"height="500"src="圖片2"width="1920"/></a></span></li></ul></div><divclass="footer-more-trigger"style="padding:0px;border:none;left:50%;"><divclass="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;"><ulclass="kmcomictriggers"style="width:950px;height:50px;margin:0auto;text-align:center;"><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><span><imgborder="0px"height="39px"src="圖片1"style="vertical-align:middle;margin:5px0;"width="120px"/></span></li><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><span><imgborder="0px"height="39px"src="圖片2"style="vertical-align:middle;margin:5px0;"width="120px"/></span></li></ul></div></div></div></div></div></div><ulclass="ks-switchable-nav"style="display:none;"></ul></div>8rI28資訊網——每日最新資訊28at.com

將上述代碼復制到記事本中,修改代碼中的圖片和鏈接地址。將圖片1、圖片2分別改成淘寶圖片空間中,1920x500px尺寸的海報圖片地址。將鏈接1、鏈接2分別改成點擊圖片后進入的頁面地址。8rI28資訊網——每日最新資訊28at.com

復制修改好的代碼,粘貼到店鋪的自定義內容區。8rI28資訊網——每日最新資訊28at.com

點擊發布。8rI28資訊網——每日最新資訊28at.com

下面是最終效果。8rI28資訊網——每日最新資訊28at.com

首先安裝好Photoshop,Dreamweaver軟件8rI28資訊網——每日最新資訊28at.com

將設計好的輪播圖上傳到淘寶空間8rI28資訊網——每日最新資訊28at.com

編輯代碼(具體操作請看視頻)8rI28資訊網——每日最新資訊28at.com

復制代碼,上傳到淘寶裝修好后,發布即可。8rI28資訊網——每日最新資訊28at.com

登陸淘寶旺鋪專業版賬號,進入店鋪裝修后臺。8rI28資訊網——每日最新資訊28at.com

在950自定義模塊下,添加模塊。新建一個自定義模塊。8rI28資訊網——每日最新資訊28at.com

以下是縮略圖全屏輪播的代碼:——————————————————————————————<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'kmcomic'}"data-widget-type="Tabs"style="height:490px;overflow:hidden;"data-title="本代碼由淘寶美工助理·特效代碼生成器自動生成"><divclass="kmcomic"style="height:500px;"><divclass="footer-more-trigger"style="width:1920px;height:500px;top:auto;padding:0px;border:none;left:50%;"><divclass="footer-more-trigger"style="width:1920px;height:500px;padding:0px;border:none;left:-960px;"><divclass="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"><divclass="J_TWidget"data-widget-config="{'trigger':'.qplb','align':{'node':'.qplb','offset':[0,-20],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;"><divclass="prev"style="float:left;font-size:100px;cursor:default;opacity:0.5;color:#F00;"><span><imgborder="0"height="52"src="http://img04.taobaocdn.com/imgextra/i4/1015393481/T2BUiMXj4bXXXXXXXX-1015393481.png"width="52"/></span></div><divclass="next"style="margin-left:950px;font-size:100px;cursor:default;opacity:0.5;color:#F00;"><span><imgborder="0"height="52"src="http://img03.taobaocdn.com/imgextra/i3/1015393481/T2V9D_Xi4aXXXXXXXX-1015393481.png"width="52"/></span></div></div><divclass="qplb"style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;"><ulclass="kmcomiccontent"style="height:500px;width:1920px;padding:0px;margin:0px;"><listyle="width:1920px;height:500px;padding:0px;margin:0px;"><span><astyle="padding:0px;margin:0px;"ahref="鏈接1"target="_blank"><imgborder="0px"height="500"src="圖片1"width="1920"/></a></span></li><listyle="width:1920px;height:500px;padding:0px;margin:0px;"><span><astyle="padding:0px;margin:0px;"ahref="鏈接2"target="_blank"><imgborder="0px"height="500"src="圖片2"width="1920"/></a></span></li></ul></div><divclass="footer-more-trigger"style="padding:0px;border:none;left:50%;"><divclass="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;"><ulclass="kmcomictriggers"style="width:950px;height:50px;margin:0auto;text-align:center;"><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><span><imgborder="0px"height="39px"src="圖片1"style="vertical-align:middle;margin:5px0;"width="120px"/></span></li><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><span><imgborder="0px"height="39px"src="圖片2"style="vertical-align:middle;margin:5px0;"width="120px"/></span></li></ul></div></div></div></div></div></div><ulclass="ks-switchable-nav"style="display:none;"></ul></div>8rI28資訊網——每日最新資訊28at.com

將上述代碼復制到記事本中,修改代碼中的圖片和鏈接地址。將圖片1、圖片2分別改成淘寶圖片空間中,1920x500px尺寸的海報圖片地址。將鏈接1、鏈接2分別改成點擊圖片后進入的頁面地址。6復制修改好的代碼,粘貼到店鋪的自定義內容區。8rI28資訊網——每日最新資訊28at.com

點擊發布。8rI28資訊網——每日最新資訊28at.com

先把下面這段代碼復制到AdobeDreamweaverCS5里面。<divclass="J_TWidget"data-widget-config="{'effect':'fade','circular':true,'contentCls':'taobaoux'}"data-widget-type="Tabs"style="height:545px;overflow:hidden;"><divclass="taobaoux"style="height:550px;"><divclass="footer-more-trigger"style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;"><divclass="footer-more-trigger"style="width:1920px;height:550px;padding:0px;border:none;left:-960px;"><divclass="J_TWidget"data-widget-config="{'contentCls':'taobaoux-com','navCls':'bbs-taobaoux-com','effect':'scrollx','easing':'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay':true,'viewSize':[1920],'circular':true}"data-widget-type="Carousel"><divclass="J_TWidget"data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;">&nbsp;</div><divclass="J_TWidget"data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}"data-widget-type="Popup"style="display:none;">&nbsp;</div><divclass="ux1920"style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;"><ulclass="taobaoux-com"style="height:550px;width:1920px;padding:0px;margin:0px;"><listyle="width:1920px;height:550px;padding:0px;margin:0px;"><ahref="#"style="padding:0px;margin:0px;"target="_blank"><imgborder="0px"height="550px"src="海報圖片1"width="1920px"/></a></li><listyle="width:1920px;height:550px;padding:0px;margin:0px;"><ahref="#"style="padding:0px;margin:0px;"target="_blank"><imgborder="0px"height="550px"src="海報圖片2"width="1920px"/></a></li><listyle="width:1920px;height:550px;padding:0px;margin:0px;"><ahref="#"style="padding:0px;margin:0px;"target="_blank"><imgborder="0px"height="550px"src="海報圖片3"width="1920px"/></a></li></ul></div><divclass="footer-more-trigger"style="padding:0px;border:none;left:50%;"><divclass="footer-more-trigger"style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background:url(http://demo.taobaoux.com/Carousel/Carousel_bg.png)repeat;top:505px;"><ulclass="bbs-taobaoux-com"style="width:950px;height:50px;margin:0auto;text-align:center;"><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><imgborder="0px"height="39px"src="海報圖片1"style="vertical-align:middle;margin:5px0;"width="120px"/></li><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><imgborder="0px"height="39px"src="海報圖片2"style="vertical-align:middle;margin:5px0;"width="120px"/></li><listyle="display:inline;margin:05px;cursor:pointer;line-height:50px;"><imgborder="0px"height="39px"src="海報圖片3"style="vertical-align:middle;margin:5px0;"width="120px"/></li></ul></div></div></div></div></div></div></div>8rI28資訊網——每日最新資訊28at.com

淘寶全屏輪播海報制作方法以及代碼?8rI28資訊網——每日最新資訊28at.com

接下來請對應修改代碼中的海報1、2、3。并且修改圖片尺寸大小。8rI28資訊網——每日最新資訊28at.com

上面修改好之后,就可以到店鋪的裝修頁面發布代碼了。8rI28資訊網——每日最新資訊28at.com

新建一個自定義模塊。然后把代碼插入進去,發布就可以了8rI28資訊網——每日最新資訊28at.com

要實現大海報的輪播8rI28資訊網——每日最新資訊28at.com

不要顯示8rI28資訊網——每日最新資訊28at.com

粘貼代碼<divclass="J_TWidget"data-widget-config="{'effecular':8rI28資訊網——每日最新資訊28at.com

把代碼中的:src="換成自己8rI28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-23-18098-0.html淘寶全屏輪播海報制作方法以及代碼?

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 開網店需要具備的能力?

下一篇: 圖幫主平面設計淘寶主圖教程?

標簽:
  • 熱門焦點
Top