無限輪播圖片的實現原理，輪播圖片原理

無限輪播圖片的實現原理，輪播圖片原理

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

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