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

2025-10-20 02:15:57

1、全屏海报1920*600效果如图

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

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

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

海报图片

海报1920*600

轮播图片

海报1920*600 2张

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

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

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

4、全屏海报代码：

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

<img src="/*图片链接*/

</div>

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

5、全屏轮播代码：

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

<img src="/*左箭头图片*/

</div>

<img src="/*右箭头图片*/

</div>

<a target="_blank" href="/*海报1跳转地址*/"style="padding:0px;margin:0px;"> <img src="/*海报1网址*/

</li>

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

</li>

</ul>

</div>

</li>

</ul>

</div>

</ul>

</div>

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

6、天猫全屏轮播优化代码：

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

<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>

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

7、进入天猫后台店铺装修

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

8、模块-自定义区，建立新自定义模块

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

9、编辑-点源码，把修改后的代码复制到编辑区并按确认就好了。

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

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。