利用UIScrollView实现的图片轮播循环滚动

前言：

这个实现方式很老了，很多应用中都有使用，但是最近看到一个新的应用，竟然还没有实现这个循环滚动，忍不住翻开以前的代码并整理了一番，以此来帮助更多的初学者。

原理：

假设我们有6张图片，我们创建一个高度为图片高度，宽度为8张图片宽度的UIScrollView，排列顺序为6-1-2-3-4-5-6-1，假设我们现在开始向左边滚动，当滚动到第7张图片的时候马上scrollRectToVisible到第1张图片，然后继续向左滚动。同理，向右滚动的时候，当滚动到第2张图片的时候，马上scrollRectToVisible到第8张图片，然后继续向右滚动。这样就实现了图片轮播的循环滚动。

排列方式演示：

演示效果图：

部分实现代码：

#pragma mark -scrollView Delegate-
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat pageWith = self.scrollView.frame.size.width;
    NSInteger page = floor((self.scrollView.contentOffset.x - pageWith/([_slideImagesArray count]+2))/pageWith) + 1;
    page --; //默认从第二页开始
    self.pageControl.currentPage = page;
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    CGFloat pageWith = self.scrollView.frame.size.width;
    NSInteger currentPage = floor((self.scrollView.contentOffset.x - pageWith/ ([_slideImagesArray count]+2)) / pageWith) + 1;

    if (currentPage == 0) {
        if (self.ianCurrentIndex) {
            self.ianCurrentIndex(_slideImagesArray.count-1);
        }
        [self.scrollView scrollRectToVisible:CGRectMake(_scrollView.frame.size.width * _slideImagesArray.count, 0, _scrollView.frame.size.width, _scrollView.frame.size.height) animated:NO];
    }else if(currentPage == _slideImagesArray.count + 1){
        if (self.ianCurrentIndex){
            self.ianCurrentIndex(0);
        }
        [self.scrollView scrollRectToVisible:CGRectMake(_scrollView.frame.size.width, 0, _scrollView.frame.size.width,_scrollView.frame.size.height) animated:NO
         ];
    }else{
        if (self.ianCurrentIndex){
            self.ianCurrentIndex(currentPage-1);
        }
    }
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    if (!self.withoutAutoScroll){
        if (_tempPage == 0) {
            [self.scrollView scrollRectToVisible:CGRectMake(_scrollView.frame.size.width * _slideImagesArray.count, 0, _scrollView.frame.size.width, _scrollView.frame.size.height) animated:NO];
        }else if(_tempPage == _slideImagesArray.count){
            [self.scrollView scrollRectToVisible:CGRectMake(_scrollView.frame.size.width, 0, _scrollView.frame.size.width,_scrollView.frame.size.height) animated:NO
             ];
        }
    }
}

分享：

我在图片轮播基础上进行了进一步优化，实现了如下功能：
1.获取网络图片
2.图片可以点击
3.控制是否显示pageControl
4.控制是否自动滚动
5.可以设置滚动时间
github地址：https://github.com/ianisme/IanScrollView

您的支持将鼓励我继续创作！

微信支付

支付宝

用 [微信] 扫描二维码打赏

用 [支付宝] 扫描二维码打赏