第223期：逼格满满┃聪明人一学就会的图片滑动展示

| 有 | 赞 | 小 | 报 |

剖析实战案例，玩转微电商

有赞小报：剖析实战案例，玩转微电商

本文作者：镊子（有赞小报河南省特约记者）

作者微信号：hitler737

文章来源：镊子的有赞小报专栏

高端大气的图片滑动展示

      是否觉得自己店铺里面的优惠券太单调，不能引起客户的注意？是否为自己的优惠券太多，而“优惠券模块”上面最多展示3个而烦恼？那么，你是否想要拥有一款特别的优惠券展示效果？222期小报确实犯了个2，滑动优惠券没给大家讲，222呀，如果想的话，请跟着镊子一起来做：

1.点击这里先看一下优惠券的滑动展示效果，或者手机微信扫描下面的二维码：

雅鹿官方微商城优惠券条幅效果展示

那么，用电脑点击链接浏览的朋友就会问了，为啥有一个滑动条：

这里请各位放心，电脑显示的页面有这个滑动条，是为了方便在电脑上滑动，在手机上是没有这个的！！！

PS：那么，问题来了，这个是怎么做到的呢？请继续往下看：

2.首先要先做好图片，“左滑更多”是一个动态图片，尺寸是101*155PX，然后其他的优惠券尺寸是300*155PX。

3.图片做好之后，在有赞上面上传上去：

4.上传好图片之后，就要替换图片的链接了。下面这个是图片的链接，点击复制即可：

①把“左滑更多”的链接复制到下图的双引号里面：

②把其他优惠券的图片链接复制到下图的双引号里面：

③在有赞找到优惠券，复制链接：

④把优惠券的链接复制到双引号里面：

PS:对于代码的解释：

到这里，代码已经写好了，先复制下来。现在要把代码放到有赞上面：①新建自定义页面模块，添加“富文本”并输入“你好”。
②在空白的地方鼠标右键—“审查元素”。

③按Ctrl+F,并输入“你好”进行查找，按照下图点击，选择第二个“你好”。

④鼠标放到“你好”上面，点击右键，选择“Edit as HTML”，把“<p>你好</p>”删掉，并把之前复制的代码粘贴到这里。
⑤代码粘贴好之后，按照下图，先用鼠标左键点击1的位置，再点击2的位置，最后保存。

⑥在其他微页面上添加“自定义模块”，选择刚才编辑的。至此，高端大气的滑动展示就做好了。

除了优惠前功能，大家可以发挥想象制作其他的展示效果，如平台商性质店铺可以做成赞助商条幅，通过调整可以实现手机界面超宽图片的左划右划展示等等，代码在下方领取，怎么发挥，看你的了哦，如果是在不会，可以联系镊子索取教程和指导

下面，大招开启，程序员的代码仓库，共产主义，按需领取

链接：http://pan.baidu.com/s/1i3BAIu5 密码：oloi

一、滑动条幅代码教程见本帖

二、悬浮窗实现教程贴

三、豪华下拉，弹出式多级菜单设计【商品分组】教程贴

这些代码都可以在自定义模块里操作，包括悬浮窗哦~然后想让其在哪个页面实现什么东西直接在相应位置添加设置好的自定义模块来实现即可。

| 有 | 赞 | 小 | 报 |

剖析实战案例，玩转微电商

| 有料 | 有趣 |

有赞小报文章和教程均由作者授权发布

版权一律归原作者所有

转载授权、商务合作、加入有赞小报编辑部

联系邮箱：yifa@youzan.com

现在都玩成代码控了😂

镊子棒棒的

技术控屌爆了

大家一起来，让自己的店铺逼格满满

老虎 发表于 2015-12-2 20:28
现在都玩成代码控了😂

代码就是可以有更多的玩儿法，希望有赞编辑器能早日支持代码模式就不用这么费劲审查元素了…

厉害，赞!

感谢分享，让我们这些不懂代码的夜学了很多

测试好了 http://wap.koudaitong.com/v2/showcase/feature?alias=hf5896be

jacklu 发表于 2015-12-2 21:28
测试好了 http://wap.koudaitong.com/v2/showcase/feature?alias=hf5896be

好流弊啊