淘宝图片轮播代码

下面图片轮播代码中<ul class="lst-main">与</ul>之间的代码为用户可以自定义修改的部分，为轮播的图片地址和超级连接地址信息。
<li><a href="http://mb2.yubaibai.com.cn/201011/30/90221245122.jpg" alt="" /></a></li>
中的“http://mb2.yubaibai.com.cn/201011/30/90221245122.jpg为图片地址。 淘巧好，好淘巧
第四行style="height:400px;" data-widget-config中的400px为图片高度设置
（1）轮播的几个图片一定要大小相同。
（2）适用范围：淘宝扶持版店铺、淘宝标准版旺铺、淘宝旗舰版旺铺、淘宝拓展版旺铺、淘宝商城。 本文来自淘巧
<div class="bd">
<div style="WIDTH: 347px; HEIGHT: 267px" class="slider-promo J_Slider tb-slide">
<ul style="HEIGHT: 267px">
<li><a href="超级链接地址" target="_blank">
<img border="0" src="图片地址" width="347" height="267"></a>
</li>
<li>
<a href="超级链接地址" target="_blank">
<img border="0" src="图片地址" width="347" height="267"></a>
</li>
<li>
<a href="超级链接地址" target="_blank">
<img border="0" src="图片地址" width="347" height="267"></a>
</li>
</ul>
<ul>
<li>1 </li>
<li>2 </li>
<li>3</li>
</ul> 内容来自taoqao
</div>
</div>
 
WIDTH：指图片的长 HEIGHT：图片的高 a href="超级链接地址" target="_blank"在心的窗口打开
img border="0" 图片的边框有无/"1"现实边框 "2"隐藏边框 src="图片地址" 换成自己的就OK了
<li>1 </li><li>2 </li><li>3 </li>代表图片的数量,
如果想添加4个就在写一个<li>4 </li>和 <li><a href="超级链接地址" target="_blank"> <img border="0" src="图片地址" width="347" height="267"></a></li>就可以了




<DIV class="slider-promo J_Slider J_TWidget tb-slide" style="HEIGHT: 400px" data-widget-config="{'effect':'fade',
'contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide">
<ul class="lst-main tb-slide-list" style="HEIGHT: 400px">
<li><A target=_blank href="宝贝链接"><img height=400 alt="" src="图片地址"></A></li>
<li><A target=_blank href="宝贝链接"><img height=400 alt="" src="图片地址"></A></li>
<li><A target=_blank href="宝贝链接"><img height=400 alt="" src="图片地址"></A></li>
<li><A target=_blank href="宝贝链接"><img height=400 alt="" src="图片地址"></A></li></ul>
<ul class=lst-trigger>
<li>1</li><li>2</li><li>3</li><li>4</li></ul></DIV></DIV>


前面的“宝贝链接”就是你宝贝的链接地址,后面的“图片地址”就是你想要显示的图片的地址，在这里需要解释一下，本轮播代码里面图片的默认高度是400像素，所以你做图片的时候必须根据自己的放置位置，相应的设置图片的宽度，比如扶植版自定义区宽度是750像素，所以你做图片的时候就要做成750×400。如果你通栏的那种就得做成900×400。







第一种：渐变式

    <div class="box J_TBox tshop-pbsm tshop-pbsm-ssd10c" ><div class="shop-custom   no-border ">
    <div class="bd">
    <div class="custom-area">
    <div class="bd" align="left">
    <div class="slider-promo J_Slider J_TWidget" style="height:353px;" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide">
    <ul class="lst-main">
    <li><a style="height:353px;" href="图片1跳转地址" target="_blank"><img height="353" alt="" src="图片1的地址" width="950"></a>
    </li><li>
    <div align="left"><a style="height:353px;" href="图片2跳转的地址" target="_blank"><img height="353" alt="" src="图片2的地址" width="950"></a></div></li></ul></div></div>
    </div></div></div></div>

    第二种：上下式轮播
    <DIV style="WIDTH: 950px; HEIGHT: 360px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll">
    <ul class=lst-main>
    <li><A style="WIDTH: 950px; HEIGHT: 360px" href="图片1跳转的地址" target=_blank><img alt="" src="图片1的地址"></A></li>
    <li><A style="WIDTH: 950px; HEIGHT: 360px" href="图片2跳转的地址 target=_blank><img alt="" src="图片2的地址"></A></li></ul></DIV>






一、亲要使用代码的哦

    二、左侧栏和右侧栏各添加一个自定义区

    三、将如下代码分别复制到两个自定义区的源码编辑区内：

    1、右侧自定义区代码

       <DIV class="slider-promo J_Slider J_TWidget tb-    slide"style="RIGHT:200px; WIDTH:950px; HEIGHT: 450px"

data-widget-type="Slide" data-widget-config="{'effect':'fade',&#10;&#10;

'contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
<ul class="lst-main tb-slide-list" style="HEIGHT: 450px">
<li><A href="链接地址" target=_blank><img height=450 alt="" src="图片地址"></A>
<li><A href="链接地址" target=_blank><img height=450 alt="" src="图片地址"></A>
<li><A href="链接地址" target=_blank><img height=450 alt="" src="图片地址"></A>
<li><A href="链接地址" target=_blank><img height=450 alt="" src="图片地址"></A></li></ul><ul class=lst-trigger>
<li>1 <li>2 <li>3 <li>4</li></ul></DIV>

    

    2、左侧自定义区代码

       <DIV style="HEIGHT: 450px"></DIV>

    现在小妹解释下以上代码的意思：

    右侧自定义区：轮播及950通栏实现代码。RIGHT:200px  是指将图片整体左移200px，这样子950宽的图片正好铺满整个通栏。WIDTH:950px; HEIGHT: 450px  大家都懂得，是图片宽950，高450，高度亲们可以按照自己的需要设置哦。“链接地址”是宝贝的地址；“图片地址”可以从图片空间获得。如果亲们想要多设置一个轮播图片，可以复制代码<li><A href="链接地址" target=_blank><img height=450 alt="" src="图片地址"></A>添加。当然，如果亲只想要轮播效果不要大通栏，只要将WIDTH:950px（即图片宽度）修改为WIDTH:750px，并将RIGHT:200px；删除即可。因为图片左移，实现通栏但是会遮住左边的页面，解决办法就看下面。

    左侧自定义区：<DIV style="HEIGHT: 450px"></DIV> 是设置一个空的高度为450的支架，注意左侧高度设置要与右侧的高度设置一样哦！这样就解决了上面的问题了。
    这样做出的通栏效果是无缝的哦，真正和拓展版一样，效果可以进我的店铺瞧一瞧！

    注意：图片地址和链接地址的修改不需要必须在代码编辑状态下进行的哦，可以在正常的编辑状态下双击图片就可以进行的。

    希望此贴对大伙真正有帮助！