养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

淘宝自定义模块代码实现1920大图轮番,自定义

时间:2024-10-09 12:31:22

淘宝的专业店铺模板的大图轮番宽度是950,并没有1920这种铺满全屏的大气,好看,跗柿椁焚如果你做店铺,有两种方法实现1920的大图轮番。颗卦赶缩掏钱买模板,这对一些前期先学习试做淘宝的朋友来说并不很好。通过代码实现超大图轮番。其实这个很简单,你只有有点基础就可以实现,而且网上也有很多这方面的说明,今天分享的是我刚刚给朋友装修这个店铺的经验,希望能够帮到大家。

方法/步骤

1、你得是淘宝买家,进入“买家中心”点击店铺装修,进入店铺装修页面,添加‘自定义区域“。

淘宝自定义模块代码实现1920大图轮番,自定义

淘宝自定义模块代码实现1920大图轮番,自定义

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="{&quot;nextBtnCls&quot;:&quot;next1408519344899&quot;,&quot;circular&quot;:true,&quot;easing&quot;:&quot;easeOutStrong&quot;,&quot;activeTriggerCls&quot;:&quot;arrow-d&quot;,&quot;effect&quot;:&quot;scrollx&quot;,&quot;viewSize&quot;:[1920],&quot;navCls&quot;:&quot;wenyukuncom1408519344&quot;,&quot;contentCls&quot;:&quot;wenyukun1408519344&quot;,&quot;prevBtnCls&quot;:&quot;prev1408519344899&quot;,&quot;autoplay&quot;: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>注意:翻页图片就是下图中标出来的图片

淘宝自定义模块代码实现1920大图轮番,自定义

淘宝自定义模块代码实现1920大图轮番,自定义

3、点击发布店铺,就会进入新装修的店铺,就可以看到自己装修的效果了

4、这段代码的核心只是使用了div标签、a标签、img标签,div表示定位,并给一个固定的宽度,a标签就是连接到对应的宝贝,img标签就是用来展示图片。记得div的宽度要图片的宽度要计算,如果不想,你可以直接将图片的宽度设置为1920,就可以直接使用这段代码。

5、总结:这段时间给朋友装修店铺,发现装修店铺也有很多小技巧,也可以不掏钱就把店铺装修的很好看,大气上档次。在后续的经验分享中会陆续分享很多和写代码能实现的,在生活中、工作中遇到的问题,希望大家继续关注我。

© 一点知识