之前写的一些技术文章都是需要读者有一定的牢固基础，渐渐发现读者并非都有基础。而对于淘宝装修这一块儿，大多都是小白。于是乎，艺灵决定在这方面写教程时以更加直白的话以及简单的实例来进行讲解。有实例练习才能出成果，光看不练永远也学不会，是吧？！不用想我说的是谁了，说的就是正在看此文的你。

今天带来的福利是关于淘宝店铺中轮播的制作，从入门到精通！

无论你是装修小白还是早已玩转淘宝店铺装修大神，艺灵都建议读者以空杯心态来读此文，你会有新的收获。如果你是一个小白，那是最好的了。手把手教你从一个小白晋升到小神，这个过程只需要10分钟的时间。之所以不是晋升为大神，那是因为大神需要时间的磨砂和自身的经验积累，各自努力吧！

本文主要围绕以下几个知识点进行讲解，想跳级的可点击知识点直接传送到对应的内容区。
1.淘宝Widget规范概述
2.了解Widget库中6种常用特效
3.浅析轮播特点并得出万能公式(重点)
4.2个核心参数制作精简版轮播(重点)
5.小试牛刀(炼就火眼金睛)
6.常用参数引伸讲解
7.特效欣赏

1.淘宝Widget规范概述

实际的开发中需要用到一些功能比较丰富的主机，如图片轮播，tab标签等，这些组件都需要设计师写Javascript才能完成，考虑前期JavaScript是不对设计师开放的，所以淘宝要提供一些widget库，方便设计调用，形成特定的组件。

通过载入淘宝的js框架来渲染

 
<div class="J_TWidget"  data-type="Slide" data-cfg="{…}">
 
<!--  code 代码区 -- >
 
</div>
 

我们会获取名字叫 J_TWidget 的元素, 并根据其类型和配置信息, 渲染相应的效果。

2.了解Widget库中6种常用特效

Tabs - 标签页
Slide - 卡盘
Carousel - 旋转木马
Accordion - 手风琴
Popup - 弹出层
Compatible - 兼容性组件

针对每种不同的动画效果需要通过配置不同的参数，配合不同的DOM结构。以下依次介绍每种不同的动画效果的配置参数以及其DOM结构。

由于内容过长，不便在此一一枚举，详情请点击《淘宝Widget规范文档》

3.浅析轮播特点并得出万能公式

先来看几组轮播图，找出共同点，便于得出万能公式。

仔细看图会发现图中出现了3种不同的颜色框框，即：红，蓝，绿。你是否会在猜想颜色代表着什么呢？如果有的话，那么恭喜亲离成功进了一步，起码已经迈出了第一步。

现在我们来总结下上面4组轮播特效的特征。
红色区：卡盘中的数学1-5，也可以是卡盘二中的右侧标题，也可以是标签1中的标题A-E，还可以是旋转木马2中的小圆点。
蓝色区：这个不用多说了，标签1中的内容A-E，卡盘1中的5张大图，旋转木马2中的几组图。
绿色区：旋转木马2中的上下页。

为了加强读者的理解，下面以抽象的角度来解剖轮播。如果我们把轮播当成是一个有着特异功能的机器人的话，那么我们可以这样理解：红色为机器人的头部；蓝色为身体；绿色为两只小小手。

说到这里不知道亲会不会有这样的疑问：为什么蓝色的或绿色的不当头部呢？答案是：难道亲的头比身体还要大吗？现实版的大头儿子出现了？即使你一直喝三鹿，我想现在还没有达到这个水平吧。可能有亲又会有疑问了：为什么标签和卡盘轮播没有手呢？还有那个卡盘的头都跑到身体下面去了？请亲看仔细了：特异功能的机器人！看过美国大片的都能理解特异功能，没有看过的想像一下悟空。没有小手照样可以存活，头在身体下也照样可以存活，还有一个超级厉害的：那就是没有了头也照样可以存活！你不信？请点击下面的实例：百叶窗轮播 (建议亲在读完知识点6后再来细评此轮播特效，亲可能需要读此文3遍以上才能参透......)

说到这里，轮播在我们面前已经不再是以前的那个轮播了，而是一个不但有着人体结构而且还有着超顽强生命力的轮播！此时，我们可以得出一个完整版轮播的万能公式：头部、身体、小手。这个也是口语版的公式，我们需要再进一步将其转换成代码版的万能公式。

4.2个核心参数制作精简版轮播

下面来结合知识点1中官方提供的js框架来写一个完整版的万能公式，代码如下：

万能公式框架（初级）

 
<div {参数设置}">
 
<!--  code 头部(适情况可省略) -- >
 
<!--  code 身体 -- >
 
<!--  code 小手(适情况可省略) -- >
 
</div>
 

淘宝官方提供的参数有很多，如下图：

如此多的参数，难道我们写一个轮播需要全部调用上吗？当然不是了，下面教大家制作一个精简版的轮播，只需要用2个参数就可以。注意上图中红色和蓝色框中的配置参数，下面就只用这两个配置参数来完成一个轮播特效。精简代码如下：

2个核心参数制作精简版轮播

 
<div class="J_TWidget ylsj-zxsc" data-widget-type="Carousel" data-widget-config="{'navCls':'ylsj-hd','contentCls':'ylsj-bd'}" style="position:relative;width:400px;height:300px;margin:200px;overflow:hidden;" data-title="【2个核心参数制作精简版轮播】">
 
　<ul class="ylsj-hd" style="text-align:center;height:20px;line-height:20px;font-size:14px;">
 
　　<li style="float:left;width:20px;height:20px;line-height:20px;border:1px solid #f00;margin-right:5px;">1</li>
 
　　<li style="float:left;width:20px;height:20px;line-height:20px;border:1px solid #f00;">2</li>
 
　</ul>
 
　<ul class="ylsj-bd">
 
　　<li style="width:400px;height:300px;float:left;background-color:#999;color:#fff;font-size:30px;">这里放第一张图</li>
 
　　<li style="width:400px;height:300px;float:left;background-color:#369;color:#fff;font-size:30px;">这里放第二张图</li>
 
　</ul>
 
</div>
 

下面来看下上面那串代码的实际效果：demo1

怎么样，简单吧，2个参数就搞定了想象中无从下手的轮播。下面对上面这串代码进行瘦身，样式清除掉，只保留核心主干。好了，精简版轮播框架已经出来了，代码如下：

万能公式框架进阶（精简版）

 
<div class="J_TWidget ylsj-zxsc" data-widget-type="Carousel" data-widget-config="{'navCls':'ylsj-hd','contentCls':'ylsj-bd'}" data-title="万能公式框架进阶（精简版）" >
 
　<ul class="ylsj-hd">
 
　　<li>头部内容</li>
 
　</ul>
 
　<ul class="ylsj-bd">
 
　　<li>身体内容</li>
 
　</ul>
 
</div>
 

这个只是瘦身版的框架，自己需要再添加自己想要的样式。注意上面这串代码中的红色区和蓝色区，整个轮播能够运行就靠这两处参数了，谨慎修改。如若想修改，请参照知识点4中的官方文档截图或者是下图，找到对应位置再进行修改。
　

赶紧来动手练习下吧。当然了，你也可以选择艺灵开发的一些轮播特效生成器制作出炫丽的效果，具体请点击导航上面的 在线生成 ，找到看中的再制作。

建议小白多看知识点3和知识点4，动手练习是必不可少的，这两步打下牢固基础后，后面特效神马的那都不是事儿。考虑到可能有小白无店铺的情况，那怎么做测试呢？不用怕，可以点击→→“清除淘宝店铺模块下边距工具”，在文本框中输入自己需要测试的轮播代码点击“生成”后再点击“成品效果”即可在新页面查看最终效果，赶快来行动吧！(咳咳，不要做标题党，名字不重要，重要的是可以实现功能！)

5.小试牛刀(炼就火眼金睛)

其实这一步可以放到知识点3的后面，因为知识点3中已经展示了案例并初步得到了结论。但是考虑到小白无基础的情况，这一步放在这里是最适合的了。

你以为通过前4个知识点的讲解，你就已经炼就火眼金睛了吗？下面再来看几个牛(bian)B(tai)的特效！截图如下：
　
想看源码的请点击案例→→demo2

问题来了，“炫酷弹性导航”和“开关灯特效”中，头部，身体以及小手又都代表哪些内容呢？别看图了，还是翻源码找答案吧~

想要炼就火眼金睛，除了看是不够的，还要思考和分析，更需要动手来练习！

6.常用参数引伸讲解

估计还没有到这步时就已经出现大量的吃不消的现象了，对于此现象，艺灵开一剂良药----书读百遍，其义自见。

上面只用了2个参数就制作出一个精简版的轮播框架，下面来枚举自己常用的一些参数。

还是前面的一张图，注意看图中黑色框中的参数，这些都是常用的参数。细心的读者可能会发现有两个框中有红色的数字1和2标记，到底是干嘛的呢？不得不说：这是一个大坑！

先说数字1处，官方给的参数只有2个，而事实上呢？艺灵已找到13个！其中抖动(elasticOut)，弹跳(bounceBoth)等超炫丽特效淘宝都没有公开。这里有一个之前统计的案例页面，有兴趣的可点击欣赏下效果→→easing中几个不为人知的属性

至于数字2呢，这个是淘宝的一个大大大bug！什么破解官方悬浮、破解官方css权限、CSS修改销量等一切超乎你相像的事情全靠它了！但是，很多人都忽略了它。还好，要不然太多人知道，那就不好了~。

好了，有关此参数的知识不宜泄露太多，想了解的可以点本站其它相关积分文章来学习相关知识。

再说数字3，知识点3中的百叶窗特效案例就是使用了此参数清除了头部。说到这里可能会有读者发出疑问：我直接在代码中把表示头部的那个去掉不行吗？答案是：不行！即使你去掉了，在放入店铺中发布后，系统会自动检测代码的完整性，会自动将其补全。只有将此参数设置成“false”并且删除头部的代码方可解决问题。可能又会有读者发出疑问了：我在参数设置里去掉表示头部的目标列表参数，我看它还怎么生成。答案依旧是不行。因为系统轮播是有默认头部样式的，即使你去掉了，系统也会进行检查，检查不到你定义有头部时会追加系统的头部样式名。想做实验的亲可以拿我上面知识点4中的代码到指定的测试工具中进行生成代码测试。当然了，如果亲怀疑其准确性也可在自己店铺进行测试，查看页面源码即可知道最终答案。

说到这个清除头部，艺灵附带解决大家的一个疑惑问题。之前经常会有亲在群里问自己做的轮播上面会为什么数字1，2，3等，代码里面明明是去掉了，但是一发布就又有了。解决的方法有2种，上面提供的这种是最直接最省事的方法。下面再提供一种解决方法，即：隐藏法。将表示头部的代码写一个hidden或者是设置隐藏属性即可解决此问题。举例说明：

hasTriggers:false法去除头部

 
<div class="J_TWidget ylsj-zxsc" data-widget-type="Carousel" data-widget-config="{'navCls':'ylsj-hd','contentCls':'ylsj-bd','hasTriggers':false}" style="position:relative;width:400px;height:300px;margin:200px;overflow:hidden;" data-title="【2个核心参数制作精简版轮播】">
 
　<ul class="ylsj-bd">
 
　　<li style="width:400px;height:300px;float:left;background-color:#999;color:#fff;font-size:30px;">这里放第一张图</li>
 
　　<li style="width:400px;height:300px;float:left;background-color:#369;color:#fff;font-size:30px;">这里放第二张图</li>
 
　</ul>
 
</div>
 

class=hidden法去除头部

 
<div class="J_TWidget ylsj-zxsc" data-widget-type="Carousel" data-widget-config="{'navCls':'ylsj-hd','contentCls':'ylsj-bd'}" style="position:relative;width:400px;height:300px;margin:200px;overflow:hidden;" data-title="【2个核心参数制作精简版轮播】">
 
　<ul class="ylsj-hd hidden" style="text-align:center;height:20px;line-height:20px;font-size:14px;">
 
　　<li style="float:left;width:20px;height:20px;line-height:20px;border:1px solid #f00;margin-right:5px;">1</li>
 
　　<li style="float:left;width:20px;height:20px;line-height:20px;border:1px solid #f00;">2</li>
 
　</ul>
 
　<ul class="ylsj-bd">
 
　　<li style="width:400px;height:300px;float:left;background-color:#999;color:#fff;font-size:30px;">这里放第一张图</li>
 
　　<li style="width:400px;height:300px;float:left;background-color:#369;color:#fff;font-size:30px;">这里放第二张图</li>
 
　</ul>
 
</div>
 

display:none法去除头部

 
<div class="J_TWidget ylsj-zxsc" data-widget-type="Carousel" data-widget-config="{'navCls':'ylsj-hd','contentCls':'ylsj-bd'}" style="position:relative;width:400px;height:300px;margin:200px;overflow:hidden;" data-title="【2个核心参数制作精简版轮播】">
 
　<ul class="ylsj-hd" style="display:none;text-align:center;height:20px;line-height:20px;font-size:14px;">
 
　　<li style="float:left;width:20px;height:20px;line-height:20px;border:1px solid #f00;margin-right:5px;">1</li>
 
　　<li style="float:left;width:20px;height:20px;line-height:20px;border:1px solid #f00;">2</li>
 
　</ul>
 
　<ul class="ylsj-bd">
 
　　<li style="width:400px;height:300px;float:left;background-color:#999;color:#fff;font-size:30px;">这里放第一张图</li>
 
　　<li style="width:400px;height:300px;float:left;background-color:#369;color:#fff;font-size:30px;">这里放第二张图</li>
 
　</ul>
 
</div>
 

7.特效欣赏

如有雅兴可点击链接http://shop112837831.taobao.com来欣赏“百叶窗”、“视差滚动轮播”、“开关灯特效”、“炫酷弹性导航”、“聚光轮播”、“宫格轮播”等特效。也可自己尝试制作特效，点我制作。

写到这里，一篇从入门到精通的教程文章就讲完了。现在再来回顾下重点知识，制作轮播的万能公式还记得吗？不记得的话请看下面

万能公式框架（初级）

 
<div {参数设置}">
 
<!--  code 头部(适情况可省略) -- >
 
<!--  code 身体 -- >
 
<!--  code 小手(适情况可省略) -- >
 
</div>
 

有此万能公式再配上官方的参数进行反复练习，试着去理解，相信当你真正理解后便能很快就制作出一个轮播特效来。而在多次的练习后，你也早已从小白晋升为小神了！你的收获与你的付出成正比，加油吧！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2014-11-17/222.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。