美文网首页
说说轮播图的那些事

说说轮播图的那些事

作者: 乐读欣 | 来源:发表于2017-08-31 13:59 被阅读0次

实现轮播的4种方式

一.n+2个UIImageView

这种方式是最早使用的,实现思想就是加入有三张图1,2,3,一个数组arr,把最后一张放在数组的第一个元素位置,第一张放在数组的最后一个元素位置,同时把三张图片也放在数组中,完成之后的数组arr  = [3,1,2,3,1],然后创建scrollview,放arr.count个UIImageView,根据当前图片的index来改变scrollview的偏移量。

二.3个UIImageView

这种方式目前没用过,也研究了下实现方式,它是设置固定的三个UIImageView,leftImageView,middleImageView,rightImageView,放在scrollview上,一直显示middleImageView,在滑动过程中,改变展示在ImageView的图片

三.使用第三方SDCycleScrollView

现在常用的是这个第三方,因为比较方便,功能也比较齐全。其里面封装了本地图片,URL图片展示的方法,也提供了横向滚动和纵向滚动方式,指示器的位置也有左中右之分。对于图片也使用的了SDWebImage进行缓存和下载。主要使用UICollectionView进行实现的,item的num给了一个很大的值,展示中间的图片,然后向左右滑动,当遇到临界值时再回到中间的item,虽然item的num很大,但利用UICollectionViewCell的复用,再加上图片的缓存,没有消耗太多的性能。

四.一个UIImageView

使用CATransition动画和手势,达到一张图片左右滑动的视觉效果,相对比较好理解些,视觉效果也可以。

参考文章:http://www.jianshu.com/p/8fbdfdf07b5e?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq

因为网上都能搜到demo,自己写的话也是借鉴,所以就抛弃了demo,简单记录下实现原理,便于以后使用。通过对这几种方式的学习,发现对于轮播图应该还有更好的方式去实现,继续学习中。

相关文章

  • 说说轮播图的那些事

    实现轮播的4种方式 一.n+2个UIImageView 这种方式是最早使用的,实现思想就是加入有三张图1,2,3,...

  • scroll-view 点击到下一个两种实现方法

    scroll-view 可以用来实现轮播图,说到轮播图我们就会想到next 和 prev 按钮。这里来说说怎么ne...

  • 微信小程序从零开始开发步骤(五)轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。 Swiper是滑动特效...

  • 轮播图(2)——基于JQ的左右滑动轮播

    上回书我们说到原生js淡入淡出效果的轮播图,这回我们说说左右滑动轮播图,由于需要缓动动画效果,原生js需要封装缓动...

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • 现金红包

    每日红包 轮播图 详情图 周末红包 轮播图 详情图 圣诞红包 轮播图 详情图

  • day7_作业

    轮播图1 轮播图2

  • [iOS]定制性强的广告轮播图--SCAdView

    @[无限轮播图] @[3D轮播图] @[广告轮播图] SCAdView Statement If my code ...

  • Bootstrap框架之轮播图

    Bootstrap中轮播图插件叫作Carousel 基本的轮播图实现 引入焦点图组件 第一件事修改id 将图片的s...

网友评论

      本文标题:说说轮播图的那些事

      本文链接:https://www.haomeiwen.com/subject/glpvrxtx.html