有不少的淘宝很喜欢淘宝图片轮播，到处淘宝图片轮播代码。今天本站以smilingart旗舰店店铺中的右侧自定义淘宝图片轮播代码为例给大家详细说明一下图片轮播的代码及使用方法：
（一）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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论