日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 電商

淘寶全屏輪播海報(bào)制作方法以及代碼?

來源: 責(zé)編: 時(shí)間:2023-11-09 12:32:22 267觀看
導(dǎo)讀第一步,我先把代碼貼出來。如下:<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>jv928資訊網(wǎng)——每日最新資訊28at.com

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

然后把做好的圖片海報(bào)上傳到圖片空間,獲得圖片網(wǎng)址。并且把獲得的網(wǎng)址對應(yīng)替換掉圖片。jv928資訊網(wǎng)——每日最新資訊28at.com

最后復(fù)制裝修的自定義模塊。保存發(fā)布即可jv928資訊網(wǎng)——每日最新資訊28at.com

淘寶全屏輪播海報(bào)制作方法以及代碼?jv928資訊網(wǎng)——每日最新資訊28at.com

最后就OK了,具體效果如下。jv928資訊網(wǎng)——每日最新資訊28at.com

先把圖片上傳到自己淘寶空間里面jv928資訊網(wǎng)——每日最新資訊28at.com

然后復(fù)制圖片地址鏈接,然后打開一秒美工jv928資訊網(wǎng)——每日最新資訊28at.com

然后填寫對應(yīng)的地址都填寫上去。最后生成代碼就行了。jv928資訊網(wǎng)——每日最新資訊28at.com

獲取了代碼然后粘貼到自定義內(nèi)容就行了源代碼里面哦jv928資訊網(wǎng)——每日最新資訊28at.com

在裝修店鋪中添加“自定義區(qū)”jv928資訊網(wǎng)——每日最新資訊28at.com

對所彈對話框進(jìn)行如圖所示的操作jv928資訊網(wǎng)——每日最新資訊28at.com

將上述設(shè)置好的代碼進(jìn)行粘貼,最后點(diǎn)擊“確定”jv928資訊網(wǎng)——每日最新資訊28at.com

會(huì)看到“自定義區(qū)”發(fā)生變化jv928資訊網(wǎng)——每日最新資訊28at.com

最后點(diǎn)擊“預(yù)覽”查看最終效果jv928資訊網(wǎng)——每日最新資訊28at.com

選擇好自己要放在首頁的海報(bào)(一般兩張就可以了)jv928資訊網(wǎng)——每日最新資訊28at.com

淘寶全屏輪播海報(bào)制作方法以及代碼?jv928資訊網(wǎng)——每日最新資訊28at.com

把要上傳到首頁的海報(bào)上傳到圖片空間jv928資訊網(wǎng)——每日最新資訊28at.com

在淘寶首頁添加一個(gè)自定義模塊,點(diǎn)擊源碼編輯模式,復(fù)制下面的代碼jv928資訊網(wǎng)——每日最新資訊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>jv928資訊網(wǎng)——每日最新資訊28at.com

登陸淘寶旺鋪專業(yè)版賬號,進(jìn)入店鋪裝修后臺。jv928資訊網(wǎng)——每日最新資訊28at.com

在950自定義模塊下,添加模塊。jv928資訊網(wǎng)——每日最新資訊28at.com

新建一個(gè)自定義模塊。jv928資訊網(wǎng)——每日最新資訊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="本代碼由淘寶美工助理·特效代碼生成器自動(dòng)生成"><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>jv928資訊網(wǎng)——每日最新資訊28at.com

將上述代碼復(fù)制到記事本中,修改代碼中的圖片和鏈接地址。將圖片1、圖片2分別改成淘寶圖片空間中,1920x500px尺寸的海報(bào)圖片地址。將鏈接1、鏈接2分別改成點(diǎn)擊圖片后進(jìn)入的頁面地址。jv928資訊網(wǎng)——每日最新資訊28at.com

復(fù)制修改好的代碼,粘貼到店鋪的自定義內(nèi)容區(qū)。jv928資訊網(wǎng)——每日最新資訊28at.com

點(diǎn)擊發(fā)布。jv928資訊網(wǎng)——每日最新資訊28at.com

下面是最終效果。jv928資訊網(wǎng)——每日最新資訊28at.com

首先安裝好Photoshop,Dreamweaver軟件jv928資訊網(wǎng)——每日最新資訊28at.com

將設(shè)計(jì)好的輪播圖上傳到淘寶空間jv928資訊網(wǎng)——每日最新資訊28at.com

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

復(fù)制代碼,上傳到淘寶裝修好后,發(fā)布即可。jv928資訊網(wǎng)——每日最新資訊28at.com

登陸淘寶旺鋪專業(yè)版賬號,進(jìn)入店鋪裝修后臺。jv928資訊網(wǎng)——每日最新資訊28at.com

在950自定義模塊下,添加模塊。新建一個(gè)自定義模塊。jv928資訊網(wǎng)——每日最新資訊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="本代碼由淘寶美工助理·特效代碼生成器自動(dòng)生成"><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>jv928資訊網(wǎng)——每日最新資訊28at.com

將上述代碼復(fù)制到記事本中,修改代碼中的圖片和鏈接地址。將圖片1、圖片2分別改成淘寶圖片空間中,1920x500px尺寸的海報(bào)圖片地址。將鏈接1、鏈接2分別改成點(diǎn)擊圖片后進(jìn)入的頁面地址。6復(fù)制修改好的代碼,粘貼到店鋪的自定義內(nèi)容區(qū)。jv928資訊網(wǎng)——每日最新資訊28at.com

點(diǎn)擊發(fā)布。jv928資訊網(wǎng)——每日最新資訊28at.com

先把下面這段代碼復(fù)制到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="海報(bào)圖片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="海報(bào)圖片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="海報(bào)圖片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="海報(bào)圖片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="海報(bào)圖片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="海報(bào)圖片3"style="vertical-align:middle;margin:5px0;"width="120px"/></li></ul></div></div></div></div></div></div></div>jv928資訊網(wǎng)——每日最新資訊28at.com

淘寶全屏輪播海報(bào)制作方法以及代碼?jv928資訊網(wǎng)——每日最新資訊28at.com

接下來請對應(yīng)修改代碼中的海報(bào)1、2、3。并且修改圖片尺寸大小。jv928資訊網(wǎng)——每日最新資訊28at.com

上面修改好之后,就可以到店鋪的裝修頁面發(fā)布代碼了。jv928資訊網(wǎng)——每日最新資訊28at.com

新建一個(gè)自定義模塊。然后把代碼插入進(jìn)去,發(fā)布就可以了jv928資訊網(wǎng)——每日最新資訊28at.com

要實(shí)現(xiàn)大海報(bào)的輪播jv928資訊網(wǎng)——每日最新資訊28at.com

不要顯示jv928資訊網(wǎng)——每日最新資訊28at.com

粘貼代碼<divclass="J_TWidget"data-widget-config="{'effecular':jv928資訊網(wǎng)——每日最新資訊28at.com

把代碼中的:src="換成自己jv928資訊網(wǎng)——每日最新資訊28at.com

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

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com

上一篇: 開網(wǎng)店需要具備的能力?

下一篇: 圖幫主平面設(shè)計(jì)淘寶主圖教程?

標(biāo)簽:
  • 熱門焦點(diǎn)
Top 主站蜘蛛池模板: 汉源县| 封开县| 大邑县| 隆回县| 金堂县| 邹平县| 秭归县| 社旗县| 遂平县| 河北区| 扶风县| 乐平市| 白银市| 巫山县| 榆中县| 青浦区| 金堂县| 潮安县| 九龙城区| 界首市| 内乡县| 柘城县| 株洲市| 滁州市| 巴东县| 肥西县| 林州市| 乌鲁木齐县| 个旧市| 北碚区| 金湖县| 凉城县| 民权县| 栾川县| 巢湖市| 吉林省| 武邑县| 泾阳县| 九台市| 来宾市| 叶城县|