（一）smilingart旗舰店的轮播效果静态预览效果截图：
详解淘宝图片轮播代码及使用方法与教程
动态演示见其网店首页：all/
（二）该图片轮播说明：
轮播的图片大小为3张750X400像素相同的图片
（三）该图片轮播代码为：
<div class="box J_TBox" >
<div class="shop-slider">
<div class="bd">
<div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
<ul class="lst-main">
<li><a href="连接地址1" ><img src="mb2.yubaibai/201011/30/F1221246343.jpg" alt="" /></a></li>
<li><a href="连接地址1" ><img src="mb2.yubaibai/201011/30/90221245122.jpg" alt="" /></a></li>
<li><a href="连接地址1" ><img src="mb2.yubaibai/201011/30/FD221246634.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</div>
（四）代码详解
（1）其中<ul class="lst-main">与</ul>之间的代码为用户可以自定义修改的部分，为轮播的图片地址和超级连接地址信息。
<li><a href="连接地址1" ><img src="mb2.yubaibai/201011/30/90221245122.jpg" alt="" /></a></li>
中的“mb2.yubaibai/201011/30/90221245122.jpg为图片地址。href中商品的连接地址。
（2）第四行 data-widget-config中的400px为图片高度设置
（五）淘宝图片轮播代码的格式（代码中的中文部分需要替换为你自己的实际参数）
<div class="box J_TBox" >
<div class="shop-slider">
<div class="bd">
<div class="slider-promo J_Slider J_TWidget" data-type="scroll" data-widget-type="Slide" data-
widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
<ul class="lst-main">
<li><a href="连接地址1" ><img src="图片1地址" alt="" width="图片宽度" height="图片高度"/></a></li>
<li><a href="连接地址2" ><img src="图片1地址" alt="" width="图片宽度" height="图片高度"/></a></li>
<li><a href="连接地址3" ><img src="图片1地址" alt="" width="图片宽度" height="图片高度"/></a></li>
<li><a href="连接地址4" ><img src="图片1地址" alt="" width="图片宽度" height="图片高度"/></a></li>
</ul>
</div>
</div>
</div>
</div>
（六）注意事项：
（1）轮播的几个图片一定要大小相同。
（2）适用范围：淘宝标准版旺铺、淘宝旗舰版旺铺、淘宝拓展版旺铺、淘宝商城。
（七）为方便大
淘宝背景音乐代码家使用，给大家提供了淘宝图片轮播代码的格式代码，其下载地址见下：
mb2.yubaibai/201011/30/2212366881.rar
（八）我们重新整理了一个通用的轮播效果代码，含渐变和上下效果的轮播代码，具体见www.yubaibai/html/wangpucuxiao/wangpucuxiao_2003.html
发布评论