淘宝的专业店铺模板的大图轮番宽度是950，并没有1920这种铺满全屏的大气，好看，如果你做店铺，有两种方法实现1920的大图轮番。1、掏钱买模板，这对一些前期先学习试做淘宝的朋友来说并不很好。2、通过代码实现超大图轮番。其实这个很简单，你只有有点基础就可以实现，而且网上也有很多这方面的说明，今天分享的是我刚刚给朋友装修这个店铺的经验，希望能够帮到大家。
方法/步骤
-
1
1、你得是淘宝买家，进入“买家中心”点击店铺装修，进入店铺装修页面，添加‘自定义区域“。
-
2
2、然后点击”编辑“，选择”编辑源代码“，然后把下面的代码编辑好复制进去。
<div style="height:500px;">
<div class="footer-more-trigger" style="width:1920px;height:500px;top:auto;padding:0px;border:none;border:0px;left:50%;">
<div class="footer-more-trigger" style="width:1920px;height:500px;padding:0px;border:none;border:0px;left:-960px;">
<div data-widget-config="{"nextBtnCls":"next1408519344899","circular":true,"easing":"easeOutStrong","activeTriggerCls":"arrow-d","effect":"scrollx","viewSize":[1920],"navCls":"wenyukuncom1408519344","contentCls":"wenyukun1408519344","prevBtnCls":"prev1408519344899","autoplay":true}" data-widget-type="Carousel" class="J_TWidget">
<div style="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="kun1920">
<ul class="wenyukun1408519344" style="height:500px;width:1920px;padding:0px;margin:0px;">
<li style="width:1920px;height:500px;padding:0px;margin:0px;">
<a href="连接宝贝" target="_blank" style="padding:0px;margin:0px;"> <img src="轮番图片淘宝空间地址001" width="1920px" height="500px" border="0px" /></a>
</li>
<li style="width:1920px;height:500px;padding:0px;margin:0px;">
<a href="连接宝贝" target="_blank" style="padding:0px;margin:0px;"> <img src="轮番图片淘宝空间地址002" width="1920px" height="500px" border="0px" /></a>
</li>
<li style="width:1920px;height:500px;padding:0px;margin:0px;">
<a href="连接宝贝" target="_blank" style="padding:0px;margin:0px;"> <img src="轮番图片淘宝空间地址003" width="1920px" height="500px" border="0px" /></a>
</li>
<li style="width:1920px;height:500px;padding:0px;margin:0px;">
<a href="连接宝贝" target="_blank" style="padding:0px;margin:0px;"> <img src="轮番图片淘宝空间地址004" width="1920px" height="500px" border="0px" /></a>
</li>
</ul>
</div>
<div class="footer-more-trigger" style="padding:0px;border:none;border:0px;left:50%;">
<div class="footer-more-trigger" style="width:528px;height:45px;padding:0px;border:none;border:0px;left:-209px;top:472px;">
<div class="prev1408519344899" style="width:18px;float:left;">
<img src="翻页图片" width="18px;" height="18px;" />
</div>
<ul class="wenyukuncom1408519344" style="width:463px;float:left;height:45px;margin-left:10px;text-align:center;border:none;border:0px;">
<li class="arrow-d" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding:0px 0px;padding-top:10px;line-height:18px;">
<img src="轮番图片淘宝空间地址001" width="100px" height="18px" />
</li>
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding:0px 0px;padding-top:10px;line-height:18px;">
<img src="轮番图片淘宝空间地址002" width="100px" height="18px" />
</li>
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding:0px 0px;padding-top:10px;line-height:18px;">
<img src="轮番图片淘宝空间地址003" width="100px" height="18px" />
</li>
<li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding:0px 0px;padding-top:10px;line-height:18px;">
<img src="轮番图片淘宝空间地址004" width="100px" height="18px" />
</li>
</ul>
<div class="next1408519344899" style="width:18px;float:right;margin-left:14px;">
<img src="翻页图片" width="18px;" height="18px;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
注意：翻页图片就是下图中标出来的图片
-
3
3、点击发布店铺，就会进入新装修的店铺，就可以看到自己装修的效果了
-
4
4、这段代码的核心只是使用了div标签、a标签、img标签，div表示定位，并给一个固定的宽度，a标签就是连接到对应的宝贝，img标签就是用来展示图片。记得div的宽度要图片的宽度要计算，如果不想，你可以直接将图片的宽度设置为1920，就可以直接使用这段代码。
-
5
总结：这段时间给朋友装修店铺，发现装修店铺也有很多小技巧，也可以不掏钱就把店铺装修的很好看，大气上档次。在后续的经验分享中会陆续分享很多和写代码能实现的，在生活中、工作中遇到的问题，希望大家继续关注我。
END
文章评论