当前位置:文档之家› 最常用图片轮播代码示例

最常用图片轮播代码示例

最常用图片轮播代码示例
因为要做taobao,这个店铺的基础装修不得不学,搞到自定义区域,就需要玩点花样了,弄点动图,活跃一下访客的视野,不懂代码也会用,是在店铺里增加一个自定义区,然后把代码复制到自定义区的代码编辑区。

觉得有用的进店支持一下,谢谢大家!
图片轮番上下滚动
<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" style="height:图片高度px;" data-
widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}">
<ul class="lst-main">
<li><a href="连接地址1" ><img src="图片地址"></a></li>
<li><a href="连接地址1" ><img src="图片地址"></a></li>
<li><a href="连接地址1" ><img src="图片地址"></a></li>
</ul>
</div>
</div>
</div>
</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 class="slider-promo J_Slider J_TWidget" style="HEIGHT: 图片高度px"
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 href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="图片地址"></A>
<LI><A href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="图片地址"></A>
<LI><A href="商品连接" target=_blank><IMG style="WIDTH: 750px; HEIGHT: 480px" alt="" src="图片地址"></A>
</LI></UL></DIV>。

相关主题