淘宝新SDK CSS通用模板教程之百叶效果轮播图 韩 金道义

淘宝新SDK-CSS通用模板教程

之百叶效果轮播图

[韩] 金道义

使用软件：记事本

使用命令：替换命令 快捷键：ctrl+H

设计图片尺寸：790X350px (超长会自动切除)

概要：1、提供完整的代码 2、替换图片1与图片2

3、链接1替换成你的目标链接地址 适用店铺：所有店铺都支持

代码店铺：天猫店铺

测试浏览器：

style=\图片1) no-repeat;height:350px;\sei_sum1 slider-promo-promo slider-promo\

style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'0.2','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:0px 0px;\class=\

style=\链接1\data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:0px 0px;\class=\

style=\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'0.3','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-95px 0px;\class=\

style=\链接1\data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-95px 0px;\class=\

style=\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\

ng':'easeBothStrong','interval':'5','duration':'0.4','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-190px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-190px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'0.5','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-285px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-285px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'0.6','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-380px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-380px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\

style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'0.7','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-475px 0px;\class=\

style=\链接1\data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-475px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'0.8','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-570px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-570px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'0.9','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-665px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-665px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'1','pauseOnHover':false}\

data-widget-type=\style=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-760px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-760px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\class=\class=\

data-widget-config=\ng':'easeBothStrong','interval':'5','duration':'1.1','pauseOnHover':false}\

data-widget-type=\class=\图片

2);width:95px;display:block;float:left;height:350px;background-position:-855px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\style=\图片

1);width:95px;display:block;float:left;height:350px;background-position:-855px 0px;\

class=\金道义免费代码大全'}]\链接1\

data-spm-anchor-id=\div>

记事本使用技巧

1、打开记事本，将上面的代码全部复制进去

2、上传所需的两张790X350图片，之后如下图所示

3、在记事本中，按住Ctrl+H，替换掉图片1、图片2、链接1

4、完成后，将记事本中的所有代码复制到店铺自定义区即可

本文来源：https://www.bwwdw.com/article/u8f.html