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

网店装修的轮播图片代码

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

相关教程

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

  • 潮流复古  极致简约  个性服饰淘宝模板

    潮流复古 极致简约 个性服饰淘宝模板

    人气:0
  • 多彩数码 科技蓝调 手机数码网店模板

    多彩数码 科技蓝调 手机数码网店模板

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

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

    人气:40580
  • 时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    时尚简约 鞋帽箱包 珠宝配饰淘宝模板

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

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

    人气:30789
  • 复古欧美 胶片暗青 创意灯饰淘宝模板

    复古欧美 胶片暗青 创意灯饰淘宝模板

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

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

    人气:38768
  • 高端优雅 多功能 精品鞋包淘宝模板

    高端优雅 多功能 精品鞋包淘宝模板

    人气:41603