轮播图实现的三种方式

假设有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
注:代码里只有前两种方法,没有第三种,大家可以自己百度第三种的实现代码;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 看了一部日本电影,《小森林》,具体来说的话它不是一整部电影那样下来,而是分为两个篇,一是冬春篇,一是夏秋篇。说的也...
    芮之阅读 712评论 0 0
  • 小小火红阅读 275评论 1 1
  • 又一年23日,昨晚睡前故意把手机上的所有闹钟都关掉,享受今天睡到自然醒的那份惬意自在。就好像上帝忽然挥了一下手,笼...
    海小姐Haisea阅读 261评论 1 0
  • 社会越来越开放,老一辈人谈恋爱,都是羞涩得恨不得把脸蒙起来。可是现在不同了,大街上、商场内、图书馆、电影院,随处都...
    兔子先生碎碎念阅读 1,651评论 5 16