淘宝图片轮播代码 渐变和上下效果代码

申请免费试用、咨询电话：400-8352-114

    淘宝装修免费模板发现很多人都喜欢淘宝图片轮播，我们在逛论坛的时候也发现好多网店都运用到了这一点，在这里淘宝学堂和大家分享一个通用的淘宝图片轮播代码，只要是淘宝旺铺均可使用，该代码可单独使用，也可以嵌套在自己的模板中，代码可以左侧自定义、右侧自定义、中间自定义模块。

    第一：淘宝轮播代码渐变效果

 <div class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="fade">
<p>&nbsp;</p>
<p>&nbsp;</p>
<ul class="lst-main">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <li><a target="_blank" href="商品连接地址"><img alt="" src="图片地址" /></a>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </li>
    <li><a target="_blank" href="商品连接地址"><img alt="" src="图片地址" /></a>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </li>
</ul>
</div>

     第二：淘宝图片轮播展示上下变换效果代码

 <Table width=750>

<DIV class="box J_TBox">
<DIV class=shop-slider>
<DIV class=bd>
<DIV class="slider-promo J_Slider J_TWidget" style="HEIGHT: 450px" data-type="scrolly" data-widget-type="Slide" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
<ul class=lst-main>
<li><A href="http://design.taobao.com/common/#" target=_blank><img src="http://img01.taobaocdn.com/imgextra/i1/86206975/T2SaJpXcXMXXXXXXXX_!!86206975.jpg" border=0></A><br><br>
<li><A href="http://design.taobao.com/common/#" target=_blank><img src="http://img04.taobaocdn.com/imgextra/i4/86206975/T2QbXpXddMXXXXXXXX_!!86206975.jpg" border=0></A><br><br>
<li><A href="http://design.taobao.com/common/#" target=_blank><img src="http://img03.taobaocdn.com/imgextra/i3/86206975/T2uaJpXeFMXXXXXXXX_!!86206975.jpg" border=0></A></li></ul></DIV></DIV></DIV></DIV></Table>

    注意：此模式图片宽度不能小于750像素，否则留白很大。代码中蓝色部分为图片地址，可以替换自己制作的存放在图片空间中的轮播图。红色部分为图片所示宝贝的详情页面。

     备注：此代码在IE浏览器上不能复制时，可选择其他浏览器，比如谷歌浏览器。