电商代码：天猫轮播代码的基本构造详解

天猫店铺的设计当中，曾经的开发者们一定是经过了非常多的考究，才得出如今丰富多变的轮播特效（也许是为了模板开发的考虑），在我一个外行看来，天猫商城的出现，它的成就不言而喻了。在之前发表的文章中不是很清晰地介绍轮播代码的结构，现如今再详细介绍。

对于很多前辈来说，这个很简单，而对于懂点HTML的小白来说，也许，这个不是很清楚。

我们一般习惯称为轮播代码，而在天猫的官方叫法中是称之为旋转木马，是由英文单词Carousel 而直译过来。看到很多轮播代码都会有这个data-widget-type=”carousel”，这个翻译过来大概就是：数据库的类型是旋转木马，也就是轮播代码。象这种类型的库还有另外5种：

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

这5种使用的频率不是很多，但是也有人用过，其中用的最多，变化最多的也就是旋转木马了。它的结构如下：

</div>

</ul>

</div>

组件的调用方法：

就是data-widget-type里面的参数和参数值

<div class="section J_TWidget"> 其中的J_TWidget这个天猫官方写的库文件的名字，这个库文件里有你需要调用的参数，就是那些duration(动画时长)，interval（轮播的时间间隔-这个在参数里没有，一般是有的），viewSize:可见视图的大小等等。

还有不变的东西有，也就是官方命名的，不能任意修改的名字有：<div class="ks-switchable-content"></div>和<ul class="ks-switchable-nav"></ul>这个名字就是里面的class，是不能修改的，官方已经定义的了。

这就是最基本的构造参数，正式由这种构造参数会衍生出各种各样的特效。组件的参数可以自由的选择。就是这样的组件可以演变出很多种特效的方式：两个旋轮播代码的结合使用（各自有各自的参数结构，大图展示，箭头，和焦点）；两个轮播代码共用一个焦点，一个对箭头；一个X轴方向的轮播和另一个Y轴方向轮播的结合；一个轮播只用焦点部分，不用轮播内容的那部分等等，这些后续都会发文介绍，理论的东西相信大家看得有些枯燥，后续会发文和视频结合讲解天猫的旋转木马是有多强。

天猫商城的建立，开启了互联网的竞相发展，之后京东，苏宁，唯品会等等也群雄并起，给我们这个时代注入了更多的新名词，如：电子商务，网购，网店，快递，物流等等。

随着电子商务的蓬勃发展催生了各种各样的工作岗位：运营，推广，活动策划，设计，美工，摄影，客服，物流等。然而，这个时代，他们都要以销售为目的而开展工作。

很有幸，遇上了自己喜欢的事情，也从当初的小白变成了小油条了，有幸遇上了天猫店铺的强大轮播功能！曾经很疯狂为之迷醉。

一个轮播代码尽然能创造出如此多的特效和功能，在此，我写这些文章的初衷是给予那些想要在这方面有所进步的爱好者看的，也许我的看法存在一定的水平，如果有大神，还望请多指教更正。

好了，开头的话就不多说，现在正式进入正题。

天猫店铺的轮播代码究竟是怎样的代码呢？代码有很多种，比如：C++，PHP，JAVA，CSS等等，我具体要讲的就是CSS和html，另外可能会附带些Javascript，由于本人是自学的，所以只学了点CSS和html的皮毛，虽然是皮毛，但希望多少能给你们想学的，正在学的后来人一点帮助，让你们少走点弯路，如果想学这些，就要尽早下定决心，如果想放弃，可以尽早，说句题外话，从事代码工作的，确实跟学医一样，要学的东西很多，不过道路也是很艰辛的，尤其不是科班出身的。

好了，话题扯远了，言归正传。

如今，天猫和淘宝店铺的代码已经很成熟了，曾经的PC端是那么如火如荼，如今手机端的兴起，更是衬托了PC端已经不那么重要，虽然如此，PC端仍然有借鉴和参考的用途。从事过美工设计的同行们也许都知道，要装修网店，必须多多少少知道点HTML，甚至CSS，在最初的时候，美工设计们切图的方式还是以tr,td表格的形式出现，如今更多是以DIV和li标签的出现，学过一点HTML的都知道，他们是网页语言的标签，是成对出现的。即<div></div><li></li>等。

天猫和淘宝轮播代码由设计师支配自由书写的地方有两大组成部分，就是CSS和HTML(前提是店铺购买了CSS权限，在天猫和淘宝是需要花钱购买的，这一点不同于京东和苏宁，后两者是免费的)，一般大的店铺都有购买，比如：韩都衣舍，天之眼等等。天猫的轮播图片代码一般都是由焦点大图，箭头，轮播序号或者小焦点组成。例如：

3张1920PX宽的大海报，左右箭头，三个小焦点

</li>

</li>

</li>

</li>

</ul>

</div>

</ul> //控制图片最下方的四个小点

</div>

一般轮播代码的基本组成部分都是由关键的四部分组成：1.data-widget-type参数部分，这里的参数部分基本都是这几个，'viewSize':[1920]指的是轮播的大小，disableBtnCls':'disable',表示按钮不可用时的class值。还拿旋转木马来说吧，轮播两侧有2个翻页的按钮：prev和next，你一直按next，轮播到最后一张，已经没有了，不能轮播了，这个时候的Class值，也就是disable的样式，是按钮变成灰色呢，还是按钮变成其他的样式呢？，这个disable是可以自由命名的。'effect':'fade'指的是轮播的方式是渐隐的方式，后面还会有以X轴和Y轴移动的方式，这个参数不多说，以后还会遇到。2.<ul class="myksc-content"> 控制banner图，也就是海报的轮播内容的，3.class="myshb-nav"控制数量的小焦点或者小焦点图，4.class="prev disable" 和class="next"是控制上一张和下一张的箭头。无论各式各样的轮播图组合，最基本的四点是必不可少的（另外其他不在设计师控制的<head>部分的除外，包括控制大小，位置的CSS和JavaScript）。

这就是最初天猫淘宝给商家最初的轮播样式，后来越来越多的网页设计师，前端设计师，店铺模板设计师涌入这个行业，就衍生出了好多风格各异的轮播图和多个轮播组合，我将会在下一期中再来慢慢介绍，介绍天猫利用Widget库能够变化出多少轮播特效代码出来。

（图片来自于互联网，仅供做学习交流使用，不做商业用途，版权归属图片版权方）

谊Phill

轮播图在我们的web项目中有着广泛的运用，特别是在商城项目中，通常用于对新品、热销、促销等产品的推荐，重要的站点公告也可以采用轮播图的方式呈现。现在实现轮播图有各种各样的第三方插件可以用，哪怕是一个完全不懂javascript或者jQuery的新手，也能实现轮播的效果；但是，作为一个初学者，我们还是要稍微了解一下原理（大神请无视）。

实现轮播的手段其实有很多，比如移动图片的位置、设置图片的显示隐藏等都可以实现轮播切换效果，这里，我们简单演示移动图片距离的方式实现轮播效果。

首先编写html页面并配合简单的css样式，代码如下：

效果如图1所示：

我们实现轮播主要是要横向移动图片的位置，所以要将图片浮动成一排，并且要隐藏多余的部分，只显示出一张图片，补充css如下：

如图2所示：

现在我们只能看到一张图片，其余的因为超出.slider-box的范围而被隐藏，如下图3所示：

其实移动图片的原理很简单，我们只需要不断改变ul的left值就可以，如下图4所示：

现在我们需要使用jQuery来不断的改变这个left值。

首先，引入jquery-3.2.1.min.js；jq代码如下：

刷新页面，效果如图5所示：

但是，图片的切换是一瞬间完成的，而且只有一次，并没有轮播，所以，这并不是我们想要的效果。轮播肯定是有规律的随着时间变化而依次播放，所以，根据之前我们在《javascript动画基础》中讲解的，我们必须结合时间函数以及时间增量完成动画效果。

修改以上jq代码：

效果如图6所示：

现在虽然可以按照时间间隔切换图片，但是在最后一张切换完成后，程序并没有停止或者复位图片，而是继续在向后移动ul，所以出现了空白的情况，因为我们每次移动的距离为1920px刚好为图片的宽度，实际上图片只需要切换2次就可以到达第3张，再切换的话就会出现空白，我们需要先判断left的是否已经为3张图片的宽度总和，即left+5760是否等于0(left为负值)，如果等于0，那么我们需要将ul的left值设置为0，再从头开始切换，修改代码：

效果如图7所示：

现在图片只要切换到最后一张，将不会继续往后切换，而是回到第一张图片，重头切换。我们也可以使用jQuery提供的animate()方法，让我们能看到图片从右向左的切换过程：

效果如图8所示：

那么，一个简单的轮播图，我们就完成了。实现轮播的方式很多，这里只是提供一个最基本的思路。喜欢的朋友可以点个关注，后期我们会放出进阶视频。

在线咨询

上一篇：HTML、HTML5重难点
下一篇：十倍提升！JS代码运行效率的技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

电商代码：天猫轮播代码的基本构造详解

您的项目需求