美文网首页
轮播图实现的三种方式

轮播图实现的三种方式

作者: mokong | 来源:发表于2016-01-04 15:38 被阅读3072次

假设有5张图片,分别是:12345,实现轮播图

方法1:用scrollView加NSTimer实现,思路:12345五张图片,实现轮播,我添加两张,变成5123451,当滑到最后一个1时,无动画位移回第一个1;当倒着滑到5时,无动画回最后的5。

难点在于:给定数组的个数,及两个边界的判断

方法2:用collectionView加NSTimer实现,思路:12345五张图片,对应collectionView的1个section,即一个section有5个row;至于有多少个section,尽量设置的大一些,eg:100;(collectionView有重用机制)所以不用担心内存问题。

难点在于:滑动的逻辑处理;如果你把section设置的非常大,就不用担心倒着滑的问题,毕竟不是每个人都那么闲。

- (void)nextPage:(id)sender {
    // 1. 得到当前正在显示的cell的indexPath,(只有一个)
    NSIndexPath *currentIndexPath = [[self.collectionView indexPathsForVisibleItems] lastObject];
    
    // 2. 得到YYMaxSections/2对应的section的indexPath,显示此indexPath对应的cell
    NSIndexPath *currentIndexPathReset = [NSIndexPath indexPathForItem:currentIndexPath.item inSection:YYMaxSections/2];
    [self.collectionView scrollToItemAtIndexPath:currentIndexPathReset atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
    
    // 3. 如果当前section的row未显示完全,则row+1,否则section+1,row置为0
    NSInteger nextItem = currentIndexPathReset.item + 1;
    NSInteger nextSection = currentIndexPathReset.section;
    if (nextItem == self.dataArray.count) {
        nextItem = 0;
        nextSection++;
    }
    
    // 4. 位移显示效果
    NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:nextItem inSection:nextSection];
    [self.collectionView scrollToItemAtIndexPath:nextIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];
}

方法3:用scrollView加NSTimer实现,12345,只用3个imageView,每次滑动的时候,始终保证下一个是居中,eg:512,123,234,当你从2滑到3的时候,结束后位移从123变为到234;

代码:https://github.com/mokong/CircleView
注:代码里只有前两种方法,没有第三种,大家可以自己百度第三种的实现代码;

相关文章

  • swift UICollectionView 实现无限轮播图

    无线轮播图的实现方式有很多,这里介绍如何通过 UICollectionView 实现无线轮播图.效果图如下: 具体...

  • 轮播图实现的三种方式

    假设有5张图片,分别是:12345,实现轮播图 方法1:用scrollView加NSTimer实现,思路:1234...

  • Swift实现轮播图以及自定义UIPageControl

    无限轮播的实现思路 轮播图最核心的部分是如何实现无限轮播。我的实现方式是: 在UIScrollView上添加三个U...

  • iOS无限轮播图 无限复用

    关于轮播图的实现, zz所了解到的有三种: 利用scrollView根据轮播图片的多少来创建imageview 然...

  • 无限轮播图 三种实现方式

    无限轮播图三种实现方式:(源码地址) 1、首尾相接方式: https://github.com/jakajacky...

  • 四种方式实现轮播图

    不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • Swift轮播图

    最近在学习swift,就用swift实现轮播图来练习一下 轮播图的创建有两种方式: 显然使用collectionV...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • 原生JS轮播的几种实现方式

    轮播图是前端入门的经典练手小作业,简单总结一下自己写过的几种轮播实现方式。先上HTML结构,以下小demo都是实现...

网友评论

      本文标题:轮播图实现的三种方式

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