随着电子商务的蓬勃发展催生了各种各样的工作岗位：运营，推广，活动策划，设计，美工，摄影，客服，物流等。然而，这个时代，他们都要以销售为目的而开展工作。
很有幸，遇上了自己喜欢的事情，也从当初的小白变成了小油条了，有幸遇上了天猫店铺的强大轮播功能！曾经很疯狂为之迷醉。
一个轮播代码尽然能创造出如此多的特效和功能，在此，我写这些文章的初衷是给予那些想要在这方面有所进步的爱好者看的，也许我的看法存在一定的水平，如果有大神，还望请多指教更正。
好了，开头的话就不多说，现在正式进入正题。
天猫店铺的轮播代码究竟是怎样的代码呢？代码有很多种，比如：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宽的大海报，左右箭头，三个小焦点
<divclass="kv1920">
<divclass="J_TWidgetmycarousel"data-widget-type="Carousel"data-widget-config="{'viewSize':[1920],'disableBtnCls':'disable','nextBtnCls':'next','delay':0.2,'navCls':'myshb-nav','contentCls':'myksc-content','effect':'fade','prevBtnCls':'prev','circular':true,'easing':'easeOutStrong','steps':1,'autoplay':true}"style="width:1920px;height:650px;position:relative;"data-widget-init="1">
<divclass="prevdisable"style="z-index:10;"data-spm-anchor-id="a1z10.1-b-s.5003-18639719939.i1.325f3f44NTA5mF"></div>
<divclass="next"style="z-index:10;"></div>
<divclass="scroller"style="text-align:center;">
<divclass="sc-ementer">
<ulclass="myksc-content">
<liclass="ks-switchable-panel-internal211"style="display:block;opacity:0;position:absolute;z-index:1;">
<ahref="//huaweistore.tmall.com/p/rd970851.htm?spm=a1z10.1-b-s.w5003-18639719939.1.325f3f44NTA5mF&scene=taobao_shop"target="_blank"data-spm-wangpu-module-id="5003-18639719939"data-spm-anchor-id="a1z10.1-b-s.w5003-18639719939.1">
<imgsrc="//gdp.alicdn.com/imgextra/i3/2838892713/O1CN011VuayqIjZ5bzdsH_!!2838892713.jpg"border="0"data-spm-anchor-id="a1z10.1-b-s.5003-18639719939.i0.325f3f44NTA5mF"></a>
</li>
<liclass="ks-switchable-panel-internal211"style="display:block;opacity:0;position:absolute;z-index:1;">
<ahref="//huaweistore.tmall.com/p/rd970851.htm?spm=a1z10.1-b-s.w5003-18639719939.2.325f3f44NTA5mF&scene=taobao_shop"target="_blank"data-spm-wangpu-module-id="5003-18639719939"data-spm-anchor-id="a1z10.1-b-s.w5003-18639719939.2">
<imgsrc="//gdp.alicdn.com/imgextra/i4/2838892713/O1CN011VuaysHkKKdiajq_!!2838892713.jpg"border="0"></a>
</li>
<liclass="ks-switchable-panel-internal211"style="display:block;opacity:1;position:absolute;z-index:9;">
<ahref="//detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-18639719939.3.325f3f44NTA5mF&pvid=fec9f402-3a90-4abd-9cb5-b483f471bc7c&pos=2&acm=03054.1003.1.2768562&id=573358934465&scm=1007.16862.95220.23864_0&sku_properties=10004:827902415;5919063:6536025;12304035:1905146457&scene=taobao_shop"target="_blank"data-spm-wangpu-module-id="5003-18639719939"data-spm-anchor-id="a1z10.1-b-s.w5003-18639719939.3">
<imgsrc="//gdp.alicdn.com/imgextra/i4/2838892713/O1CN011VuayquhuFtvPmS_!!2838892713.jpg"border="0"></a>
</li>
<liclass="ks-switchable-panel-internal211"style="display:block;opacity:0;position:absolute;z-index:1;">
<ahref="//huaweistore.tmall.com/p/rd711451.htm?spm=a1z10.1-b-s.w5003-18639719939.4.325f3f44NTA5mF&scene=taobao_shop"target="_blank"data-spm-wangpu-module-id="5003-18639719939"data-spm-anchor-id="a1z10.1-b-s.w5003-18639719939.4">
<imgsrc="//gdp.alicdn.com/imgextra/i1/2838892713/O1CN011VuaypDxnTyhfzz_!!2838892713.jpg"border="0"></a>
</li>
</ul>
</div>
<ulclass="myshb-nav"style="display:inline-block;left:888px;z-index:11;">
<liclass="ks-switchable-trigger-internal210"></li>
<liclass="ks-switchable-trigger-internal210"></li>
<liclass="ks-switchable-trigger-internal210ks-active"></li>
<liclass="ks-switchable-trigger-internal210"></li>
</ul>//控制图片最下方的四个小点
</div>
</div>
</div>
一般轮播代码的基本组成部分都是由关键的四部分组成：1.data-widget-type参数部分，这里的参数部分基本都是这几个，'viewSize':[1920]指的是轮播的大小，disableBtnCls':'disable',表示按钮不可用时的class值。还拿旋转木马来说吧，轮播两侧有2个翻页的按钮：prev和next，你一直按next，轮播到最后一张，已经没有了，不能轮播了，这个时候的Class值，也就是disable的样式，是按钮变成灰色呢，还是按钮变成其他的样式呢？，这个disable是可以自由命名的。'effect':'fade'指的是轮播的方式是渐隐的方式，后面还会有以X轴和Y轴移动的方式，这个参数不多说，以后还会遇到。2.<ulclass="myksc-content">控制banner图，也就是海报的轮播内容的，3.class="myshb-nav"控制数量的小焦点或者小焦点图，4.class="prevdisable"和class="next"是控制上一张和下一张的箭头。无论各式各样的轮播图组合，最基本的四点是必不可少的（另外其他不在设计师控制的<head>部分的除外，包括控制大小，位置的CSS和JavaScript）。
