鞋子轮播换肤效果

这里有炫酷的海报制作分享这里有牛B的设计师创意这里有超级好用的创意工具，帮你快速渲染动态效果请关注醉悠枫，请点击蓝色小字“关注”...

鞋子轮播换肤效果

案例醉语言链接地址：

http://www.ecplay.com/index.php?c=slist&m=shareview&shareid=1580

该案例所需组件及设计原理：HTML 任意轮播 任意图层

HTML：超出后隐藏（限制内容的显示范围）

任意轮播：垂直轮播

任意图层：加图片以及固定的使用

设计原理：将宝贝图片设置固定，在宝贝上面用任意图层加png的点缀内容，然后做垂直轮播，最后用HTML限制轮播显示的范围。也可以先加HTML，设定大小，在里面编辑轮播内容。

 

具体步骤：

1.首先要准备好图片素材，要做多少宝贝轮播，宝贝图片是需要准备好的，还有就是上面的点缀的png图片，都要做好之后上传到图片空间，如下图：



2.打开醉语言编辑器，添加HTML，在这里，我们可以先不设置他的大小，最后看内容需要具体设置大小，即可



3.点击上图编辑之后，进入到二级页面，添加任意轮播，左侧和顶部距离先设置0,0（后期根据需要再调整）；在我们这个轮播里不需要缩略图，所以缩略图勾选掉；大小设置海报的大小（很多人不知道在哪设置，注意下图）；轮播方式选择垂直轮播：



4.基本参数设置完之后，开始做轮播的主体内容。

（注：在这里教大家一个相对来说算偷懒的办法：我们要做的轮播内容因为规则基本是一样大的，所以，可以做好轮播内容0之后，直接把代码复制到其他轮播内容里面，打开其他轮播内容只要换图就可以，不需要再单独一个个设置参数了哦。做其他的轮播也可以用此法）

点击轮播内容0里轮播0的编辑，如下图：



进入二级编辑页面（和开始的HTML一样），在里面添加任意图层，左侧和顶部距离设置（0,0），

加宝贝图片，设置固定；



宝贝图片设置好之后，在上面用任意图层加那些点缀的png图片，可以一个或者多个，根据自己效果需要进行搭配，，此处没有特殊要求。

在本效果里面，是加了两层png，在图层面板里面可以看到

都做好之后，就可以点击顶部关闭或者是右侧叉号关闭本层，回到上一层



5第一个轮播内容做好之后，复制该轮播内容代码到其他轮播内容里面，然后挨个去其他的轮播内容里换图片就可以了。



6主体都设置好之后，有必要强调一些细节：一般默认的轮播动画速度是1秒，如果觉得快，效果不是很好，可以单独设置，在案例里面设置的是1.5s



然后是翻页按钮的设置，在此案例中，只是简单的加按钮图片的，也可以加css动画，（

很多人发现在加了动画之后，会显示组件自带的一个箭头，很不美观，没关系，在添加图片的位置加none，就不会显示了）



7.这样轮播内容都做好之后，就可以预览看下效果，没有问题的话，就点击左上角或者右上角关闭，回到最初的HTML。设置HTML的大小和超出隐藏，第一步有讲。注意HTML的顶部和左侧距离为0。里面的轮播可以依据需要设置。

8.记得在放在后台之前，先预览看下效果哦。

    关注 醉悠枫电商服务