起航学习网

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

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

<DIV style="WIDTH: 200px; HEIGHT: 60px" 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">

<ul class=lst-main>

<li><A style="WIDTH: 200px; HEIGHT: 60px" href="商品链接地址" target=_blank><img alt="" src="图片地址"></A></li><li><A style="WIDTH: 200px; HEIGHT: 60px" href="商品链接地址" target=_blank><img alt="" src="图片地址"></A></li></ul></DIV>

格式：

<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" 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">

<ul class=lst-main>

<li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li>

<li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li>

</ul></DIV>

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

<DIV style="WIDTH: 200px; HEIGHT: 60px" 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: 200px; HEIGHT: 60px" href="商品链接地址" target=_blank><img alt="" src="图片地址"></A></li><li><A style="WIDTH: 200px; HEIGHT: 60px" href="商品链接地址" target=_blank><img alt="" src="图片地址"></A></li></ul></DIV>

格式：

<DIV style="WIDTH: 宽度px; HEIGHT: 高度px" 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: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li>

<li><A style="WIDTH: 图片宽度px; HEIGHT: 图片高度px" href="商品连接地址" target=_blank><img alt="" src="图片地址"></A></li>

</ul></DIV> 

文章出自：http://qh.itpxw.cn/peixun/dianshang/taobao/201626166.html

文章标题：淘宝图片轮播代码 渐变和上下效果代码

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉