无限轮播图片的实现原理

无限轮播图相信是很多开发人员常用的一个功能，这里总结一下常用的两种方式的实现原理

一、使用UIScrollview实现无限轮播

　　用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];

}

二、使用UICollectionView实现无限轮播

　　N张照片把contentsSize设置为N+2个图片的宽度，例子如下，两端填充如图，当处于一端时，且即将进入循环状态的时候，如第二张图，从状态1滑动到状态2，在滑动结束的时候，将当前的位置直接转到状态3，直接setContentOffset神不知鬼不觉，视觉上是循环的。

注意：这里不能使用- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;当我们滑动cell是是无法触发这个函数的，虽然它是动画结束后就可以触发，但是它指的动画是系统原生动画，如我们的手动滑动是无法触发该函数的。

 

 

总结源自：

　　http://www.jianshu.com/p/7123a07cc552