仿京东商品详情轮播图

好久没有更新啦,今天来搞一个京东的轮播:直接上效果


8月-16-2016 09-38-10.gif
8月-16-2016 09-37-17.gif

如果想真实体验可以去京东APP体验一下.
描述一下效果,向左滑动时,右边的图片从底下出来 而且是一半的位置
同理向右滑动也是 .那么怎么实现呢
先搞一个collectionview 做一个不同的轮播,然后在视图的最上层放一个imageview 上面呈现当前的图片,这个是 图片一 图片二放的是上一张图片把它放图片一 和轮播之间位置是 图片二的终点 是图片一的x = 0 处.这样当滑动轮播时,图片一的偏移量 和轮播的偏移量相同就好,图片二的偏移量是轮播的偏移量/2.0 这样就会好. 当然反方向相同. 这是描述 具体操作还是需要修改一些 具体下载代码查看 就不一一解释啦 当然如果感兴趣还是亲自动手来一下在. 这是他的图层关系:


仿京东商品详情轮播图_第1张图片
A27281B2-7C2A-4BD8-AF09-D5976720C9D5.png

二. 第二个效果


8月-16-2016 09-55-46.gif

1.效果描述
可以看到当页面向下滑动时,轮播页面一直处于居中状态且大小不变.
页面向上滑动时,轮播页面隐藏在底部图层.
2.实现方式.
首先确定这个轮播安放的位置是 tableview的tablehand.然后 把它的当让 前提是 他表头上面有一个view 随着 表的滑动frame 也改变 而 轮播就放在这个view上面,并且centerY相等.
再有就是 让这个轮播的图层插入最顶层.

三 细心地会发现右下角有一个角标动画 ,很简单,我就不解释啦 不贵最好还是实现已下载这样有利于学习啊.
具体代码就不写啦 可以下载看看(里面还有部分其他内容)
https://git.oschina.net/GAOZEJIAN/JDbanner.git

你可能感兴趣的:(仿京东商品详情轮播图)