淘宝全屏轮播海报制作方法以及代码？

第一步，我先把代码贴出来。如下：<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>8Wm28资讯网——每日最新资讯28at.com

我做的海报长宽是990*380的。算上下面的缩略图背景高度是110。缩略图长宽是190*100。如果海报长宽不是这个尺寸的话，是需要修改一下上面的尺寸的。8Wm28资讯网——每日最新资讯28at.com

然后把做好的图片海报上传到图片空间，获得图片网址。并且把获得的网址对应替换掉图片。8Wm28资讯网——每日最新资讯28at.com

最后复制装修的自定义模块。保存发布即可8Wm28资讯网——每日最新资讯28at.com

8Wm28资讯网——每日最新资讯28at.com

最后就OK了，具体效果如下。8Wm28资讯网——每日最新资讯28at.com

先把图片上传到自己淘宝空间里面8Wm28资讯网——每日最新资讯28at.com

然后复制图片地址链接，然后打开一秒美工8Wm28资讯网——每日最新资讯28at.com

然后填写对应的地址都填写上去。最后生成代码就行了。8Wm28资讯网——每日最新资讯28at.com

获取了代码然后粘贴到自定义内容就行了源代码里面哦8Wm28资讯网——每日最新资讯28at.com

在装修店铺中添加“自定义区”8Wm28资讯网——每日最新资讯28at.com

对所弹对话框进行如图所示的操作8Wm28资讯网——每日最新资讯28at.com

将上述设置好的代码进行粘贴，最后点击“确定”8Wm28资讯网——每日最新资讯28at.com

会看到“自定义区”发生变化8Wm28资讯网——每日最新资讯28at.com

最后点击“预览”查看最终效果8Wm28资讯网——每日最新资讯28at.com

选择好自己要放在首页的海报（一般两张就可以了）8Wm28资讯网——每日最新资讯28at.com

8Wm28资讯网——每日最新资讯28at.com

把要上传到首页的海报上传到图片空间8Wm28资讯网——每日最新资讯28at.com

在淘宝首页添加一个自定义模块，点击源码编辑模式，复制下面的代码8Wm28资讯网——每日最新资讯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;"><ahref="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"width="1366"/></a></li><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><ahref="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"width="1366"/></a></li><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><ahref="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"width="1366"/></a></li><listyle="margin:0px;padding:0px;width:1366px;height:500px;list-style-type:none;"><ahref="http://chenruimy.tmall.com/?&amp;&amp;scene=taobao_shop"style="margin:0px;padding:0px;"target="_blank"><imgborder="0"data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/113535006/TB2DhCFXVXXXXc8XXXXXXXXXXXX_!!113535006.jpg"height="500"width="1366"/></a></li></ul></div><ulclass="slide-kun1365065449925triggers"style="margin:0px;padding:0px;display:none;"><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li></ul></div></div>8Wm28资讯网——每日最新资讯28at.com

登陆淘宝旺铺专业版账号，进入店铺装修后台。8Wm28资讯网——每日最新资讯28at.com

在950自定义模块下，添加模块。8Wm28资讯网——每日最新资讯28at.com

新建一个自定义模块。8Wm28资讯网——每日最新资讯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>8Wm28资讯网——每日最新资讯28at.com

将上述代码复制到记事本中，修改代码中的图片和链接地址。将图片1、图片2分别改成淘宝图片空间中，1920x500px尺寸的海报图片地址。将链接1、链接2分别改成点击图片后进入的页面地址。8Wm28资讯网——每日最新资讯28at.com

复制修改好的代码，粘贴到店铺的自定义内容区。8Wm28资讯网——每日最新资讯28at.com

点击发布。8Wm28资讯网——每日最新资讯28at.com

下面是最终效果。8Wm28资讯网——每日最新资讯28at.com

首先安装好Photoshop，Dreamweaver软件8Wm28资讯网——每日最新资讯28at.com

将设计好的轮播图上传到淘宝空间8Wm28资讯网——每日最新资讯28at.com

编辑代码（具体操作请看视频）8Wm28资讯网——每日最新资讯28at.com

复制代码，上传到淘宝装修好后，发布即可。8Wm28资讯网——每日最新资讯28at.com

登陆淘宝旺铺专业版账号，进入店铺装修后台。8Wm28资讯网——每日最新资讯28at.com

在950自定义模块下，添加模块。新建一个自定义模块。8Wm28资讯网——每日最新资讯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>8Wm28资讯网——每日最新资讯28at.com

将上述代码复制到记事本中，修改代码中的图片和链接地址。将图片1、图片2分别改成淘宝图片空间中，1920x500px尺寸的海报图片地址。将链接1、链接2分别改成点击图片后进入的页面地址。6复制修改好的代码，粘贴到店铺的自定义内容区。8Wm28资讯网——每日最新资讯28at.com

点击发布。8Wm28资讯网——每日最新资讯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>8Wm28资讯网——每日最新资讯28at.com

8Wm28资讯网——每日最新资讯28at.com

接下来请对应修改代码中的海报1、2、3。并且修改图片尺寸大小。8Wm28资讯网——每日最新资讯28at.com

上面修改好之后，就可以到店铺的装修页面发布代码了。8Wm28资讯网——每日最新资讯28at.com

新建一个自定义模块。然后把代码插入进去，发布就可以了8Wm28资讯网——每日最新资讯28at.com

要实现大海报的轮播8Wm28资讯网——每日最新资讯28at.com

不要显示8Wm28资讯网——每日最新资讯28at.com

粘贴代码<divclass="J_TWidget"data-widget-config="{'effecular':8Wm28资讯网——每日最新资讯28at.com

把代码中的：src="换成自己8Wm28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-23-18098-0.html淘宝全屏轮播海报制作方法以及代码？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 开网店需要具备的能力？

下一篇： 图帮主平面设计淘宝主图教程？