淘宝店铺幻灯片

       工作原因，花时间研究了一下淘宝店铺的前端代码，发现淘宝店铺的前端就像是戴着镣铐跳舞，我们没法在中间嵌入js代码，因为淘宝的编辑器不支持js代码，这也是为了整个网站的安全着想吧。

去网上搜了一些关于淘宝店铺装修的代码，在网店上测试了一番，对于我这种没接触过淘宝店铺的装修的人来说，刚开始还真不知道写完之后在哪里测试。摸索了大半天（这个还真的得摸索大半天，因为后来才发现这是一个被废弃的官方旗舰店，而所有的链接都是链到了现在的旗舰店，所以我每次看到的都不是我改过的页面）。

经测试，发现这段代码是可执行的，我把它粘贴到下面，方便以后的解释，我把主要的代码提炼出来。

<div class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','duration': 0.5,'triggerType':'mouse','autoplay':true,'contentCls': 'lst-main', 'navCls':'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" style="width: 950px; height: 400px">
<ul class="lst-main">

<li>
<a href="#" style="width: 950px; height: 400px" target="_blank"><img border="0" src="图片链接" width="950" /></a></li>

<li>
<a style="width: 950px; height: 400px" target="_blank"><img height="400" src="图片链接" width="950" /> </a></li>

<li>
<a style="width: 950px; height: 400px" target="_blank"><img height="400" src="图片链接" width="950" /> </a></li>

</ul>
</div>

     这段代码能实现淘宝店铺的首页幻灯片效果，我初一看也觉得很奇怪，没有一个js代码？  其实认真去分析才发现，其中有一个很关键的词：class="slider-promo J_Slider J_TWidget" 这个词也就意味着，淘宝内置的js库可以之间通过该属性对该div中的内容进行控制

     另外data-widget-config 是对幻灯片属性的配置：

   data-widget-config="{'effect':'scrolly','duration': 0.5,'triggerType':'mouse','autoplay':true,'contentCls': 'lst-main', 'navCls':'lst-trigger', 'activeTriggerCls': 'current'}"

      为了使上面的代码更加容易理解，我去淘宝官网查了一下 淘宝店铺开发文档我把相关信息复制过来，如下：

==== 配置参数列表====
{
| effect 
| none/fade/scrolly/scrollx
(默认值：none)
| 切换时的动画效果
none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动
scrollx, 水平滚动
|-
| easing
| easeOutStrong/easeBoth
| 滚动的动画方方式
|-
| countdown
| true/false  (默认值：false)
| 是否开启倒计时样式
|-
| countdownFromStyle 
| 自定义值
| 设定倒计时最终样式<br>
如: width:15px 表示进度条最终宽度,可先在CSS里对样式进行定义
|-
| navCls
| 自定义值
| 对其进行轮播的目标列表的class值
|-
| contentCls
| 自定义值
| 轮播列表所对应的内容列表的class值
|-
| delay
| 自定义数值  (默认值：1)                          
| 延迟加载时间<br>
.1 == 100ms
|-
| triggerType
| mouse/click<>
(默认值：mouse)br<br>
| 触发方式——
mouse：鼠标经过触发<br>
click：鼠标点击触发<br>
|-
| hasTriggers                                
| true/false  (默认值：true)
| 是否设置触发点
|-
| steps
| 自定义数值 (默认值：1)
| 切换视图内有多少个panels
|-
| viewSize
| 自定义值
| 切换视图区域的大小。<br>
一般不需要设定此值，仅当获取值不正确时，用于手工指定大小
|-
| activeIndex
| 自定义数值  (默认值：0)
| 默认激活的列表项
|-
| activeTriggerCls
| 自定义值 (默认值：active)
| 默认激活列表项的class值
|-
| autoplay
| true/false  (默认值：true)
| 是否自动播放
|-
| circular
| true/false  (默认值：true)
| 是否有循环滚动效果
|-
|duration
| 自定义值（默认值：0.5）
| 动画时长
.1 = 100ms
|}

       其实把上面的参数熟悉之后，改幻灯片的代码的重点也就基本上掌握了。运用的时候只要按照上面的格式，然后根据自己的需要修改相关参数就可以很快的制作出幻灯片。

      当然<li>标签里面的内容是可以根据自己的需求进行修改的，下面是相对简洁的方式，这里不多加赘述，因为感觉文章篇幅太长会影响大家网上阅读的体验，所以我宁愿写成连载的方式，也不愿意把文章写成长脚袜——又臭又长。

<li>
<a style="width: 950px; height: 400px" target="_blank"><img height="400" src="图片链接" width="950" /> </a></li>