淘宝店铺装修之全屏轮播代码解析（基础版专业版智能版）
全屏轮播在店铺装修的首屏位置一直没有被撼动。形形色色的首页，预览你会发现轮播的影子无处不在。不管是全屏，或者小尺寸，轮播在的位置是非常抢眼的也是非常重要的！今天给大家带来淘宝店铺装修之全屏轮播代码解析！
Part.1 轮播尺寸1920*？
显示器分辨率普遍在1920*1080p的当下。由于淘宝不支持全屏代码的自适应（淘宝天猫都屏蔽width:100%；）；所以首页的宽度自然而然选择1920px的宽度！至于高度而言单屏1080px的高度。轮播高度的选择就根据个人喜好而定。主要考虑的一些因素：淘宝官方标题的115px高度+店招150px高度+不同浏览器的标签标题工具栏高度不统一。因此轮播高度建议：450px-700px。下面我们以650px高度举例！
Part.2 1920全屏轮播代码（淘宝店铺基础版）
轮播尺寸：1920px*650px | 轮播数量：3张。淘宝店铺基础版代码如下：
<div style="height:640px;">
<div class="mipf2e8b5e0cb2b9176 footer-more-trigger mallNav-others sn-simple-logo" style="width:1920px;height:650px;border:0;padding:0;right:auto;z-index:1;top:auto;left:50%;">
<div class="mipb5e0cb2b91769e89 footer-more-trigger mallNav-others sn-simple-logo" style="width:1920px;height:650px;border:0;padding:0;right:auto;z-index:1;top:auto;left:-1060px;">
<div class="mipcb2b91769e893ce0 J_TWidget" data-widget-type="Carousel" data-widget-config="{'nextBtnCls':'next1','duration':1,'activeTriggerCls':'hidden','easing':'easeOutStrong','effect':'scrollx','interval':4,'navCls':'nav_pixel1','contentCls':'content_pixel2','prevBtnCls':'prev1','autoplay':true}" style="height:650px;overflow:hidden;position:relative;">
<ul class="mip91769e893ce0b170 content_pixel2"><li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2LLB5p.lnpuFjSZFjXXXTaVXa_!!860326432.jpg);"> </a></li>
<li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2yLFKpYBnpuFjSZFGXXX51pXa_!!860326432.jpg);"> </a></li>
<li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i2/860326432/TB2DUSgp5lnpuFjSZFgXXbi7FXa_!!860326432.jpg);"> </a></li></ul>
<ul class="mip9e893ce0b170b324 footer-more-trigger mallNav-others sn-simple-logo" style="width:100%;height:20px;z-index:98;padding:0;border:0;right:auto;top:auto;left:auto;margin-left:700px;bottom:18px;">
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;">轻便缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;">透气缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;"> 透气缓震跑鞋</li></ul>
<ul class="mip3ce0b170b324bf92 footer-more-trigger mallNav-others sn-simple-logo nav_pixel1" style="width:100%;height:20px;right:auto;z-index:99;padding:0;border:0;top:auto;left:auto;margin-left:700px;bottom:18px;">
<li style="width:180px;height:30px;background-color:#FFFFFF;display:block;float:left;margin-right:0px;font-size:12px;color:#4F4F4F;line-height:30px;text-align:center;opacity:0.9;" class="mipb170b324bf9229ef hidden">轻便缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#FFFFFF;display:block;float:left;margin-right:0px;font-size:12px;color:#4F4F4F;line-height:30px;text-align:center;opacity:0.9;"> 透气缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#FFFFFF;display:block;float:left;margin-right:0px;font-size:12px;color:#4F4F4F;line-height:30px;text-align:center;opacity:0.9;">
透气缓震跑鞋</li></ul>
</div></div></div></div>
轮播效果如下图所示：
Part.3 轮播代码解析
图片更换成加链接：
<li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2LLB5p.lnpuFjSZFjXXXTaVXa_!!860326432.jpg);"> </a>
</li>
href="#" 把#换成店铺宝贝链接
background-image:url(...) 把括号里面的图片链接换成图片空间的链接
轮播标题修改：
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;">
轻便缓震跑鞋
</li>
“轻便缓震跑鞋” 修改为自己想要的文案（下方还有一个一样的“轻便缓震跑鞋” 要修改哦）
Part.4 轮播高度调整
650px高度不是你想要的效果。那么下面就教大家修改轮播高度！举例：650px高度修改成550px高度的轮播！需要的工具：Dreamweaver 是集网页制作和管理网站于一身的所见即所得网页编辑器（任何版本均可，需要绿色版的或者官方最新版cc2017 可以留言；给大家安装包）
Part.5 专业版智能版天猫代码
为了小店店主的福利。主要讲解的均是店铺基础版的！专业版、智能版（包括天猫），代码跟基础版就一个数值的不同。其他是一模一样的！定位数值第三个<div....style=".....left:-1060px;">修改为<div....style="left:-960px;">这样修改专业版智能版就可以直接使用了！
Part.6 轮播视觉效果进阶
第四个<div class="mipb324bf9229ef6499 J_TWidget"...>其中两个数值修改将会改变轮播的视觉样式。
'effect':'scrollx' 将scrollx（左右轮播）修改为scrolly（上下轮播）
渐变效果参数修改
'easing':'easeOutStrong' 参数easeOutStrong修改视觉效果改变；供参考！
'easing':'easeNone' 没有任何变化
'easing':'easeBoth' 感觉和None差不多
'easing':'elasticOut' 变化很快后抖动一下
'easing':'easeOutStrong' 先快后慢→强
'easing':'easeOut' 先快后慢→速度比较缓
'easing':'easeIn' 先慢后宽→速度比较缓
'easing':'elasticIn' 抖动一下→很快变化
'easing':'backIn' 倒回去一点→再变化→有点象起步跑
'easing':'backOut' 跳过头→又返回→速度比较缓
上一篇提到《教你淘宝美工0基础淘宝店铺全屏装修技巧 Get！》；没有学习的可以去看看！
下一篇讲解预告：基础装修流程【ps切片→导出→上传图片空间→批量替换图片链接→加链接（或者用热点的方法加链接）→上传装修后台→发布】
有帮到大家，希望大家点关注。以上！
我是一个喜欢摄影的美工设计！（文|爱摄影的设计）
淘宝店铺装修如何添加淘宝全屏轮播海报？
一对一服务，犹如全职。上石艺术有天马行空的想象可打破常识的束缚，唤醒大众的审美角度，不要叫我牛逼设计，请叫我神笔马良。www.shangshiyishu.com
相信不少小伙伴都听说过用代码制作全屏轮播海报，但是，具体怎么操作，估计很多人是不明白的！
甚至连在什么地方添加代码都不知道？也曾经有人说自己说就是学网页制作的，说自己是高手了，但是，他发觉自己编写的代码怎么上传到淘宝店铺里面，怎么就是不好使呢？老是发生错位呢？
先说从哪里添加代码？
就是我们说的自定义模块啊，这个是淘宝留的一个可以让你自由发挥的一个模块，除了可以添加图片和文字，关键的是可以在模块里面直接添加HTML代码。
把该模块直接拖拽到你的店铺页面里，点击编辑弹出如下窗口，选择源码模式直接粘贴代码进来就可以了。
那为什么你的代码不生效呢?
一种是经常反应的图片不生效的问题，老生常谈了。这类的请你先把你的所有要用到的图片，请先上传到淘宝的图片空间里，然后在把代码里的图片地址替换成淘宝图片空间里的图片地址！
还有一种是点击链接不生效的问题，这类的请先检查下自己的链接是不是要跳到淘宝站外的，淘宝是不支持外链的，就像上面的图片问题一样，凡是有外站的链接淘宝都是会屏蔽的。
还有一种是图片错位的问题，这类的也请先检查下，你的内嵌式css是不是使用的绝对定位！这就是我前面所说的很多自认为的代码高手，总说自己代码不生效的问题，既然淘宝会屏蔽掉外链，当然也会屏蔽一些CSS代码的，自定义模块代码里面是不能使用绝对定位的，会直接屏蔽！
很多懂点代码知识的朋友都知道要实现全屏居中，代码往往必须要用到绝对定位来控制！我真的很佩服很多高人不知道从哪里找到的淘宝漏洞，这个class: footer-more-trigger 居然自带绝对定位定位属性，也不知道是哪个地方在引用，反正用到我们的淘宝店铺里一点也不受影响，网上的大多数全屏轮播轮播代码，全部都是利用的这个class! 但这仅仅针对的是淘宝店铺，天猫店铺他们利用的是另外一个class：sn-simple-logo
关于这类的class，可以直接让店铺模块突破950的限制，很多专业版的旺铺也可以使用全屏效果了，很多的辅助工具，甚至包括那些350等，都是利用的这一系列class，可以说真没想到，这也竟然能形成一系列的收费产业，不过人家也是凭的本事吃的饭。尽管淘宝小二也曾经下过狠话，一定要干掉某家工具，然而，小二都换了一波又一波，放狠话的小二都走了，人家还是好好的，我们这些旁观者都感慨，真是一言难尽啊！
自己不会写代码怎么办？
真的，现在已经有很多的针对淘宝店铺的代码辅助工具了，只要选择好图片和设置，可以直接一键生成代码！再也不烦什么代码了，在百度上搜索淘宝全屏轮播代码在线，相信会搜索到一大堆！我自己常用的是鱼摆摆，刚哥哥，盛夏科技，码工助手等……
用鱼摆摆家的辅助工具为例，真的是现在已经很方便了，很多辅助工具都差不多类似，都是直接设置高度，选择图片和填写链接地址了，最后直接获取代码，复制出来粘贴到自定义模块里面就可以了！
今天就先说到这里，上石艺术有天马行空的想象可打破常识的束缚，唤醒大众的审美角度，专业做淘宝美工外包，对于设计有自己的独特风格以及态度。美工外包找我们，更可靠！有需要联系18600153430微信同号
相关问答
我的网店 轮播 怎么弄啊?这个需要特效代码来做,而不能使用淘宝自带的轮播模块了。推荐使用全屏轮播-模板在线制作全屏轮播带小图全屏轮播带文字描述使用这些工具制作好代码以后直接粘...
淘宝 店铺 轮播全屏 图片怎么设置的?淘宝店铺图片轮播的尺寸在卖家中心后台的店铺装修设置。操作方法如下:1、首先登录淘宝卖家中心,进入店铺装修2、接着在店铺装修后台点击添加模块。3、此刻...
淘宝 卖家装修首页怎么可以弄免费的 全屏 宽图?可以的,你百度搜索神码装修工具。里面有全屏轮播代码生成,做各种全屏效果都可用,免费使用可以的,你百度搜索神码装修工具。里面有全屏轮播代码生成,做各种全屏效...
淘宝 直播间的字幕飘屏怎么设置?淘宝直播屏幕挂字需要电脑端操作!具体详细步骤如下;1:需要在电脑端下载一淘宝直播电脑版的APP;2:登录淘宝账号或则手机淘宝扫描二维码账号登录;3:进入...
淘宝 直播能 轮播 视频吗?淘宝直播可以轮播视频的。1、进入PC端直播后台,点左上方“信息卡”;2、点击进入后,在信息卡处可以设置“轮播条”;3、点击“轮播条”开启相关内容设置,输入...
淘宝轮播 图片尺寸大小?阿里巴巴的详情页可以做790的,750的就更可以了。首页有一个板块图片轮播,默认尺寸是宽1920,高在250-500之间。自定义尺寸是950宽,高随意。这些都是不花钱购...
淘宝 店铺的 轮播 图大小是多少合适?店铺图片轮播的话宽度是950px的,高度自设,一般300-500之间就可以了,第一张图做多高,后面每一张图都要和第一张一样高。全屏海报宽度1920px,高度和上面一样。...
淘宝 网上图片 轮播 一般几张合适?一般情况下,建议选择3至5张图片进行轮播。因为这个数量可以让用户在短时间内浏览到更多的商品信息,提高用户体验。然而,也可以选择更多或者更少的图片轮播,以...
如何在 淘宝 首页 轮播 图片里出现?1、登录淘宝,点击卖家中心2、点击进入图片空间,点击图片上传3、返回卖家中心,点击店铺装修4、点击在此处添加模块然后会出现一个选框,点击添加“图片轮播...
淘宝 店中的 轮播 图片是什么格式?一般都是jpg或者jpeg格式,然后上传多张图片,就成了轮播图片形式一般都是jpg或者jpeg格式,然后上传多张图片,就成了轮播图片形式