UIScrollView轮播、焦点图总结（三个imageView-、两个imageView）

常用实现轮播图的方法概述#

1、在scrollView中增加collectionView,利用collectionViewCell的循环利用机制和特殊的布局效果实现
2、在scrollView中增加三个ImageView实现轮播效果
3、在scrollView中增加二个imageView实现轮播效果

代码实现#

第一种方式：核心代码

- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:    (NSInteger)section

   {
      return self.foucsArray.count   *LZBFoucsTimes; 
   }

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

  {
     LZBCollectionFoucsCell *cell =  [LZBCollectionFoucsCell CollectionFoucsCell:collectionView WithReuseIdentifier:LZBFoucsCollectionCellID forIndexPath:indexPath];
     NSInteger length = self.foucsArray.count;
     cell.cellImageName =self.foucsArray[indexPath.row%length];
     return cell;
   }

第二种方式是三个ImageView实现

// 更新imageView上面的图片内容

for (NSInteger i = 0; i < LZBAllImageViewCount; i++) { // i是用来获取imageView的
    UIImageView *imageView = self.scrollView.subviews[i];
    // 根据当前页码求出imageIndex
    NSInteger imageIndex = 0;
    if (i == 0) { // 左边
        imageIndex = self.pageControl.currentPage - 1;
        if (imageIndex == -1) { // 显示最后面一张
            imageIndex = self.images.count - 1;
        }   
    } else if (i == 1) { // 中间
        imageIndex = self.pageControl.currentPage;
    } else if (i == 2) { // 右边
        imageIndex = self.pageControl.currentPage + 1;
        if (imageIndex == self.images.count) { // 显示最前面一张
            imageIndex = 0;
        }
    }
    imageView.tag = imageIndex;
    // 图片数据
    [self loadImage:imageIndex withImageView:imageView];
    }

滚动时候计算当前索引核心代码

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

    {
// 找出显示在最中间的imageView
UIImageView *middleImageView = nil;
// x值和偏移量x的最小差值
CGFloat minDelta = MAXFLOAT;
for (NSInteger i = 0; i < LZBAllImageViewCount; i++) {
    UIImageView *imageView = self.scrollView.subviews[i];
    // x值和偏移量x差值最小的imageView，就是显示在最中间的imageView
    CGFloat currentDelta = 0;
       currentDelta = ABS(imageView.frame.origin.x - self.scrollView.contentOffset.x);
        if (currentDelta < minDelta)
        {
            minDelta = currentDelta;
            middleImageView = imageView;
        }
        self.pageControl.currentPage = middleImageView.tag;
        }
    }

同时可以直接从github下载，readme上面有详细的方法介绍：三个imageView实现scrollView轮播图

第三种方式：之前看到别人有两个ImageView实现轮播图，看了之后感觉做得还不做就是动画效果少了一些，所以我就下载了代码进行了改进，下面是核心代码：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{
CGFloat offsetX = scrollView.contentOffset.x;
[self computeCurrentPageWithOffset:offsetX];
//加载ImageView
if(offsetX < scrollView_Width * 2)   //左滚动
{
    switch (self.style) {
        case LZBFocusScrollViewScrollStyle_Fade:
            {
                self.currentImageView.alpha = offsetX/scrollView_Width -1;
                self.otherImageView.alpha = 2 - offsetX/scrollView_Width;
            }
            break; 
        default:
            {
              self.otherImageView.frame = CGRectMake(scrollView_Width, 0, scrollView_Width, scrollView_Height);
            }
            break;
    }
    self.nextIndex = self.currentIndex -1;
    if(self.nextIndex < 0)
        self.nextIndex = self.images.count -1;
    if(offsetX <= scrollView_Width)
        [self changeToNextImage];
   }
else  if (offsetX >scrollView_Width * 2)   //右边滑动
{ 
    switch (self.style) {
        case LZBFocusScrollViewScrollStyle_Fade:
            {
                self.currentImageView.alpha = offsetX/scrollView_Width -2;
                self.otherImageView.alpha = 3 - offsetX/scrollView_Width;
            }
            break;
        default:
            {
            }
            break;
    }
    self.otherImageView.frame = CGRectMake(CGRectGetMaxX(self.currentImageView.frame), 0, scrollView_Width, scrollView_Height);
    self.nextIndex = (self.currentIndex + 1)%self.images.count;
    if (offsetX >=scrollView_Width * 3 ) {
        [self changeToNextImage];
    }  
}
if(self.imageUrls.count > 0)
{
    [self.otherImageView sd_setImageWithURL:[NSURL URLWithString:self.imageUrls[self.nextIndex] ]placeholderImage:self.placeHoderImage];
}
 else
 {
   self.otherImageView.image = self.images[self.nextIndex];
 }    
}

同时可以直接下载github代码使用原文两个imageView实现轮播图和我的改动加强版 两个imageView实现轮播图加强版

原理简介#

第一种方法：采用UICollectionViewLayout流水布局样式布局collectionViewCell,利用collectionViewCell的循环利用机制利用可重用的cell赋予不同的值（优点：操作简单，缺点：代码太多）

第二种方法：从当前的imageView滚动到下一个imageView，然后把下一个imageView滚动到三个imageView的中心位置，在这过程中赋值的时候是三个imageView同时赋值，滚动的时候找到距离滚动最近的一个imageView currentDelta = ABS(imageView.frame.origin.x - self.scrollView.contentOffset.x); 把这个imageView的索引设置为当前的索引，滚动完成后把这个imageView设置为中心滚动位置。

第三种方法：设置scrollViewContentSize的滚动范围是5 * scrollView_Width并且把currentImageView增加到scrollView中，并且设置currentImageView的offset.x = scrollView_Width(相当于是把currentImageView放在中间位置)，让后通过- (void)scrollViewDidScroll:(UIScrollView *)的scrollView.contentOffset.x判断滚动方向 scrollView.contentOffset.x < scrollView_Width * 2 左边滚动 otherImageView增加在右边 scrollView.contentOffset.x > scrollView_Width * 2 右边滚动 otherImageView增加在左边 滚动otherImageView之后，赋值并且设置 self.currentImageView.image = self.otherImageView.image;，在把currentView放在中间 self.scrollView.contentOffset = CGPointMake(scrollView_Width * 2, 0);

代码下载链接：
三个imageView实现：三个imageView实现scrollView轮播图
两个imageView实现（原文版）：两个imageView实现轮播图
两个imageView实现各种动画（加强版）：[两个imageView实现轮播图] 两个imageView实现轮播图加强版

最后赠言###

如果觉得文章对您有帮助，不要忘记star哦!，star 是对程序猿最大的鼓励！