iOS 无限轮播图的两种实现

首先说一下实现的思想：

1. 用UIScrollView实现，在scrollView上添加3个UIImageView，分别用来显示上一张图片，当前显示的图片，下一张图片。scrollView在不滑动的时候永远显示当前图片（第二张图片）即contentOffset ＝ CGPointMake(scrollViewW,0)，在滑动的时候可以预览部分上一张图片或下一张图片。现在以向左滑动为例，因为已经设置好三张图片，我们向左滑动可以看到下一张图片的一部分（此时屏幕显示着部分当前图片和部分下一张图片）。如果完成了向左滑动，在UIScrollView的代理方法 scrollViewDidEndDecelerating:里 将三个UIImageView上显示的图片更换（下标一次＋1），此时第二个imageView显示的就是之前的第三个imageView上的图片，最后将scrollView的偏移量拉回到第二张图片上[scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO]

   - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
       
       NSInteger leftIndex;
       NSInteger rightIndex;
       
       if (scrollView.contentOffset.x == bannerScrollViewW * 2) {
           ;
           /** 向左滑  计算 左 中 右 的下标索引*/
           leftIndex = self.centerIndex  % self.imageNames.count;
           
           self.centerIndex = (self.centerIndex+1) % self.imageNames.count;
           
           rightIndex = (self.centerIndex +1) % self.imageNames.count;
           //NSLog(@"往左滑");
       }else if (scrollView.contentOffset.x == 0) {
           /** 向右滑  计算 左 中 右 的下标索引*/
           rightIndex = self.centerIndex;
           self.centerIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);
           leftIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);
           //NSLog(@"往右滑");
       }else {
           // 没有滑走 什么都不做，直接return
           return;
       }
       
       /** 设置图片 */
       self.leftImageView.image = [UIImage imageNamed:self.imageNames[leftIndex]];
       self.centerImageView.image = [UIImage imageNamed:self.imageNames[self.centerIndex]];
       self.rightImageView.image = [UIImage imageNamed:self.imageNames[rightIndex]];
       
       /** 设置pageControl currentPage  因为永远显示中间的图片，故此currentPage＝centerIndex */
       self.pageControl.currentPage = self.centerIndex;
       
       // 将 bannerScrollView 拉回到中间图片的位置 显示图片
       [scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO];
   }

    

2. 就用一个UIImageView来实现，给imageView添加swipe手势（左右都添加），在手势绑定的方法里更换图片，只是在设置下一张图片后要添加一个过渡动画 CATransition；利用过度动画的过度效果让图片产生翻页的效果；只是这种方式没有UISCrollView的那种交互性，不能中途终止翻页；

   - (void)swipeGestureRight:(UISwipeGestureRecognizer *)gesture {
       
       self.centerIndex = (self.centerIndex+1) % self.imageNames.count;
       
       self.centerImageView.image = [UIImage imageNamed:self.imageNames[self.centerIndex]];
       
       CATransition *animation=[CATransition animation];
       animation.delegate = self;
       animation.type = @"push";
       animation.subtype = @"fromRight";
       animation.duration = 1;
       animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
       
       [self.centerImageView.layer addAnimation:animation forKey:@"cube"];
       
       /** 设置pageControl currentPage  因为永远显示中间的图片，故此currentPage＝centerIndex */
       self.pageControl.currentPage = self.centerIndex;
       NSLog(@"right");
   }
   
   
   - (void)animationDidStart:(CAAnimation *)anim {
       self.isAnimation = YES;
       [self.timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:3]];
   }
   
   
   - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
       self.isAnimation = NO;
   }
   
   
   - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
       return !self.isAnimation;
   }

   完整的代码：http://pan.baidu.com/s/1c1u6NCG