公告:唯艺客户端火爆上线,模板自动安装,国际安全认证~
马上注册,领取百套精美模板(永久免费) 个人中心 | 下载客户端 | 客户服务 | 登录 | 注册
您所在的位置:淘宝装修教程 > 淘宝装修代码

网店装修的轮播图片代码

2015-08-04 05:18:49

        不少店家喜欢在店铺装修中使用轮播图片,特别是图片的渐变和上下效果,可以使店铺大大添色。唯艺网店装修平台整理了一些这方面的代码,和大家分享一下。这个代码,只要是淘宝旺铺就可以使用。如果单独使用,嵌套在自己的模板中,也是可以的。这个代码可以用在左侧自定义、右侧自定义、中间自定义模块。


        我们先看看渐变效果的轮播代码:

<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>

        代码的具体格式是这样,细节之处可以根据店铺装修的实际进行调整。如果卖家觉得使用代码太麻烦,也可以在网上搜索一些相应的模板。只是模板的内容相对固定,无法制定个性化内容。

 
         本文出自唯艺网店装修平台(www.weiyi5.cc,转载请注明出处!


0

相关教程

懒人专区:淘宝模板-免费安装查看更多>

  • 双十一 淘宝活动促销模板 潮流女装

    双十一 淘宝活动促销模板 潮流女装

    人气:33016
  • 至简大牌 全屏轮播 女装服饰淘宝模板

    至简大牌 全屏轮播 女装服饰淘宝模板

    人气:40580
  • 绚丽欧美 高端深蓝 母婴用品淘宝模板

    绚丽欧美 高端深蓝 母婴用品淘宝模板

    人气:38794
  • 活力欧美 帅气男装 服装配件淘宝模板

    活力欧美 帅气男装 服装配件淘宝模板

    人气:40233
  •  型男健美 素雅青灰 型男健美淘宝模板

    型男健美 素雅青灰 型男健美淘宝模板

    人气:0
  • 时尚彩妆 全屏轮播 服装配件网店模板

    时尚彩妆 全屏轮播 服装配件网店模板

    人气:30789
  • 春天衣橱 精品酷黑 潮流男装淘宝模板

    春天衣橱 精品酷黑 潮流男装淘宝模板

    人气:59832
  • 大牌简约 大气背景 珠宝配饰网店模板

    大牌简约 大气背景 珠宝配饰网店模板

    人气:38768