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