無限輪播圖片的實現原理

無限輪播圖相信是很多開發人員常用的一個功能，這里總結一下常用的兩種方式的實現原理

一、使用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