【温馨提示】本文共有1337个字，预计阅读完需要4分钟，请仔细阅读哦！
阿里巴巴店铺装修中离不开全屏轮换广告，由于阿里店铺装修原配的轮换图有点呆板，所以通过自己编写的特效代码来制作全屏轮换广告还是很有必要的。
阿里店铺装修全屏广告轮换效果图
(由于画面问题，缩放显示了，正常宽度是 1920px或100%)
阿里店铺装修全屏广告轮换html代码
① 属性的设置，这里nav(触发切换的标签)不使用默认，对应的是.lht_nav里面的li元素，切换的面板设置为.lht_pane，上下页按钮设置如图，触发动作设置成点击触发.
② li的触发标签个数与lht_pane面板的数量必须要一致。
阿里店铺装修全屏广告轮换css代码
① 这里涉及到一个css小技巧分享，对触发标签容器.lht设置文本居中，然后子元素设置为display:inline-block; (内联块状的意思，区别于float:left),这样里面的小模块就会在容器.lht里面居中了，这样能确保触发切换的按钮能一直画面中间
② 此处只是外部的箭头图片路径地址
③ .disabled类是当上下页失效(第一页和最后一页时)的特定类，小耐这里设置成不显示，也可以考虑设置成透明。
阿里巴巴国内店铺装修的全屏广告特效的基本代码就如上所示，此特效实际就是基于切换组件fx.tabs变通出来的特效，部分全屏特效是可以有缩率小图在左边或者右边，实际只要将触发标签里面的元素换成图片即可。
【进阶知识】
我们刚开店的小伙伴，又不懂ps技术，那对于刚刚开始装修店铺的小伙伴来说，图片的尺寸大小很是头疼，因为淘宝上到处都会用到图片。今天我教给大家几个常见的需要立即用到的几个地方，马上解决你的头痛烦恼！
进入卖家中心，作为一个淘宝店铺，我们首先需要有一个店铺的标志。这个标志你可以根据自己卖的类目来定。前期不知道用什么图片比较好，这个时候，你可以参考同行的店铺图片。比如，以女装为例。
第一步：我们进入淘宝首页，搜索和你卖的通类目的销量好的店铺。参考对方的店铺标志。注意：1、在搜索的时候，记得选择下拉框：店铺。有的同学第一次搜索没有注意下拉框的话，可能就搜到的是宝贝的展示页面了。这个时候看到的结果页不是店铺的标志页面。2、搜索的时候输入的词可以是你店铺在卖的产品词，比如：打底裤女
具体搜索如下图所示：
搜索结果页如下图：
此时会可以学着模仿这些大卖家的店铺标志去做。你可以选择你喜欢的风格模仿。因为每个人的审美不一样，基础差的同学，前期可以去网页找一张自己喜欢的图。前提是，不要涉及到版权的问题。
比如：我们在网页上找到了自己喜欢的这张图：
但是在发布的时候会出现问题：因为你找到的图片不能直接用，不一定是符合淘宝规定的大小的。我们做淘宝，一定要遵守淘宝的规则。
店铺标志大小标准要求：文件格式GIF、JPG、JPEG、PNG文件大小80K以内，建议尺寸80PX*80PX
这个时候，就需要我们进行尺寸的修改，具体方法如下：
1、首先需要电脑安装一个PhotoshopCS6，方便以后作图使用。很多同学问，这个软件是不是需要付费？答案，我们用免费的就行了。
2、当我们安装好了办公工具之后。用鼠标的左键双击软件，打开这个软件。进入下面这个界面。如下图所示：
问：下载的版本不同会影响吗？ 答：不影响
今天教大家的是比较基础简单的方法，我们可以马上现学现用。不过在后期作图过程中还是需要学习更多关于美工方面的知识噢！
3、点击文件
4、点击新建
5、填写图片名称、把宽度和高度改成80PX*80PX，然后点击确定。如下图所示：
6、点击确定后会出现如下图所示的页面：
7、下面将我们的图拖进这个白色的框框里面。
8、适当调整图片的大小，保持美观自然，不要让图片变形了。
9、当我们把尺寸按照标准做好后，图片形状也调整好后，点击文件，储存为。
如果此时出现如下对话框：选择“置入”
10、此时会弹出如下对话框，我们可以存在桌面上方便查找。也可以选择存在自己熟悉的文件夹里面。
存储注意要点：
a、记得把文件命名，方便自己知道这个是我要的图片
b、将格式设置一下，下拉框选择：文件格式GIF、JPG、JPEG、PNG
c、点击保存
11、
保存时会弹出这个窗口：
12、此时点击：确定
（如果没有其他特殊要求）
13：这样我们的图片就制作完成了。
14、在窗口上传我们需要刚刚做好的店铺标志：
15、上传成功。就可以显示啦！
手机端装修的时候有个店招牌。也是有明确的尺寸大小要求的。同样。我们按照刚刚的方法去操作就可以。
手机端店铺装修入口如下：
卖家中心--店铺管理---店铺装修--点击手机端---装修页面
点击装修页面，后出现下图：这个时候会出现店铺招牌。
可以看到店铺招牌尺寸要求为：750*580 ，建议大小400k左右。我们可以用前面的同样方法把这个做出来。
学习了以上方法，相信大家在作图的尺寸上面已经学会了。希望大家学会举一反三，这样就可以在店铺的很多地方运用到了。希望可以帮助到大家。
淘宝代码怎么用的呢「关于淘宝代码使用技巧」
【本文标题和网址】淘宝全屏轮播代码怎么设置「分享js轮播介绍实现简单代码」 http://www.cftyj.cn/taobao/2024082760173.html
内容更新时间（UpDate）：
2024年08月27日 星期二
