淘宝950自定义区一排三个图片轮播代码

运用淘宝店铺装修系统软件内置的“基础模块”里加上“轮播图”就可以完成950滚屏了，这一段轮播代码能够用在好几个店面好几个网页页面。

只需在此基础上稍作改动就可完成一排三个轮播图，而每一个轮播图能够有四款商品图片展现。

能将这一段轮播代码作为热卖商品或是新产品商品的展现控制模块。

你可以去子雨的实际效果网页页面：

http://tqao.taobao.com/p/xiaoguo.htm

下边代码解释：

'effect':'scrolly'  往上翻转的滚屏，必须改成渐变效果的滚屏只必须把”scrolly“改成”fade“

img src="#" 商品图片详细地址        a href="#"    商品的链接地址


 

编码的使用方法：
 

一、新创建一个950的自定区控制模块。

二、拷贝下边的编码，随后黏贴到自定区中。

应用编码前请先将相匹配编码的上传图片自身的淘宝图片空间连接上来，要不然会出错说不能使用别人图片空间的照片。
 

<div class="slider-promo J_TWidget" data-type="scroll" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger',  'activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:310px;height:310px;float:left;margin-right:10px;">
<ul class="lst-main">
  <li>
   <a href="#"><img src="http://img01.taobaocdn.com/imgextra/i1/22862746/T2kVmmXJtaXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img03.taobaocdn.com/imgextra/i3/22862746/T2gmalXJpaXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img03.taobaocdn.com/imgextra/i3/22862746/T2_P1mXSFXXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img01.taobaocdn.com/imgextra/i1/22862746/T2WBWnXFBXXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
</ul>
</div>
<div class="slider-promo J_TWidget" data-type="scroll" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger',  'activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:310px;height:310px;float:left;margin-right:10px;">
<ul class="lst-main">
  <li>
   <a href="#"><img src="http://img04.taobaocdn.com/imgextra/i4/22862746/T24.inXHtXXXXXXXXX-22862746.jpg" style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img02.taobaocdn.com/imgextra/i2/22862746/T2FcmmXFRaXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img02.taobaocdn.com/imgextra/i2/22862746/T2EgqlXMBaXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img02.taobaocdn.com/imgextra/i2/22862746/T2Y85nXIxXXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
</ul>
</div>
<div class="slider-promo J_TWidget" data-type="scroll" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main',  'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:310px;height:310px;float:left;">
<ul class="lst-main">
  <li>
   <a href="#"><img src="http://img02.taobaocdn.com/imgextra/i2/22862746/T2Y85nXIxXXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img03.taobaocdn.com/imgextra/i3/22862746/T2_P1mXSFXXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img01.taobaocdn.com/imgextra/i1/22862746/T2kVmmXJtaXXXXXXXX-22862746.jpg"  style="width:310px;height:310px;" /></a></li>
  <li>
   <a href="#"><img src="http://img02.taobaocdn.com/imgextra/i2/22862746/T2FcmmXFRaXXXXXXXX-22862746.jpg" style="width:310px;height:310px;" /></a></li>
</ul>
</div>