轻松学会做天猫店铺全屏海报+全屏轮播海报

来源：互联网 2023-02-20 16:09:24 98

教你轻松学会做天猫店铺全屏海报全屏轮播海报

工具/原料

天猫

方法/步骤

全屏海报1920*600效果如图

轻松学会做天猫店铺全屏海报全屏轮播海报

全屏轮播海报1920*600效果如图

轻松学会做天猫店铺全屏海报全屏轮播海报

咋们想先用PS设计好图片，好进入下一步骤

海报图片

海报1920*600

轮播图片

海报1920*600 2张

左右箭头图片30*60各一张

图片大小根据自己需求设置。

轻松学会做天猫店铺全屏海报全屏轮播海报

全屏海报代码：

按小编注释的修改一下就可以用了。

div style="height:600px;">

div class="sn-simple-logo" style="left:50%;top:auto;border:none;padding:0;">

div class="sn-simple-logo" style="left:-960px;top:auto;border:none;padding:0;">

a href="/*跳转链接*/" target="_blank" style="width:1920px;height:120px;display:block;">

img src="/*图片链接*/" width="1920px" /*图片宽度*/height="600px" /*图片高度*/border="0" />/a>

/div>

轻松学会做天猫店铺全屏海报全屏轮播海报

4该信息非法爬取自百度经验

全屏轮播代码：

按小编注释的修改一下就可以用了。

div class="J_TWidget" data-widget-config="{"contentCls":"taobaoux"}" data-widget-type="Tabs" style="height:600px;overflow:hidden;">

div class="taobaoux" style="height:600px;">

div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:600px;top:auto;padding:0px;border:none;left:50%;">

div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:600px;padding:0px;border:none;left:-50%;top:0;">

div data-widget-config="{"contentCls": "taobaoux-com","navCls": "bbs-taobaoux-com","effect": "scrollx","easing": "easeBothStrong","prevBtnCls":"prev","nextBtnCls":"next","autoplay": true,"duration":1,"interval":4,"viewSize":[1920],"circular": true}" data-widget-type="Carousel" class="J_TWidget">

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

div class="prev" style="cursor:pointer;">

img src="/*左箭头图片*/" width="30" />

/div>

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

div class="next" style="cursor:pointer;">

img src="/*右箭头图片*/" width="30" />

/div>

div style="height:600px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="uxux">

ul class="taobaoux-com" style="height:600px;width:1920px;padding:0px;margin:0px;">

li style="width:1920px;height:600px;padding:0px;margin:0px;">

a target="_blank" href="/*海报1跳转地址*/"style="padding:0px;margin:0px;"> img src="/*海报1网址*/" width="1920px"/*宽度*/ height="600px" /*高度*/border="0px" />/a>

/li>

li style="width:1920px;height:600px;padding:0px;margin:0px;">

a target="_blank" href="/*海报2跳转地址*/"style="padding:0px;margin:0px;"> img src="/*海报2网址*/" width="1920px" height="600px" border="0px" />/a>

/li>

/ul>

/div>

div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:50px;padding:0px;border:none;z-index:99;left:50%;">

div class="footer-more-trigger sn-simple-logo" style="width:1920px;height:50px;padding:0px;border:none;left:-50%;top:555px;">

ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align:center;">

li style="display:inline;margin:0 5px;cursor:pointer;line-height:50px;">

/li>

/ul>

/div>

ul class="ks-switchable-nav" style="display:none;">

/ul>

/div>

轻松学会做天猫店铺全屏海报全屏轮播海报

天猫全屏轮播优化代码：

按小编上面注释的修改一下就可以用了。

div class="JiuLing" data-title="" data-time="1472711509" style="height:600px;">div class="sn-simple-logo" style="left:auto;right:auto;width:990px;height:600px;top:auto;padding:0;border:none;z-index:1;background:none; ">div class="sn-simple-logo" style="left:-465px;top:0px;height:600px;width:1920px;border:none;padding:0;background:none; ">div data-widget-config="{

'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'click','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden'

}" data-widget-type="Carousel" class="J_TWidget">div class="J_TWidget Mprev" data-widget-config="{

'trigger':'.AB','align':{

'node':'.AB','offset':[-510,0],'points':['cc','cc']

}

}" data-widget-type="Popup" style="display:none;">div class="Mprev" style="font-size:100px;cursor:pointer;">img src="">/div>/div>div class="J_TWidget Mnext" data-widget-config="{

'trigger':'.AB','align':{

'node':'.AB','offset':[510,0],'points':['cc','cc']

}

}" data-widget-type="Popup" style="display:none;">div class="Mnext" style="font-size:100px;cursor:pointer;">img src="">/div>/div>div class="AB" style="height:600px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;">ul class="macontent" style="height:600px;width:1920px;padding:0px;margin:0px;">li class="item">a target="_blank" href="">img src="https://gdp.alicdn.com/imgextra/i1/2964786037/TB2cny8aznyQeBjSszbXXbCxVXa_!!2964786037.jpg">/a>/li>li class="item">a target="_blank" href="">img src="https://gdp.alicdn.com/imgextra/i4/2964786037/TB2vM00XFHzQeBjSZFuXXanUpXa_!!2964786037.jpg">/a>/li>/ul>/div>div class="sn-simple-logo" style="width:1920px;height:45px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none; display:block;">div class="sn-simple-logo" style="z-index: 99;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;">ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#fff;">li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●/li>li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●/li>/ul>/div>div class="sn-simple-logo" style="z-index: 98;width:1920px;height:45px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;">ul class="ma_nb" style="width:1920px;height:45px;margin:0 auto;text-align: center;border:none;color:#333333;">li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●/li>li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:1.4;font-size:27px;">●/li>/ul>/div>/div>/div>/div>/div>/div>

轻松学会做天猫店铺全屏海报全屏轮播海报