UIScrollView和UIPageControl 实现让图片无限循环播放和左右滑动

</pre><p><img src="webkit-fake-url://e0d69b2a-abd0-4ffe-9f08-f42c8c19d8fc/image.tiff" alt="" /></p><p></p><p></p><p><pre name="code" class="objc">#import <UIKit/UIKit.h>

@interface HomeHeaderView : UIView <UIScrollViewDelegate>

//定义相关属性
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageControl;
@property (nonatomic, strong) NSTimer *timer;
@end

设置左右无限滑动方法

// 首页头视图1 滑动视图
- (void)headerView1 {

    //----------创建对象scrollView----------
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kSWidth, 160)];
    _scrollView.delegate = self;    // 设置代理
    
    // 设置分页尺寸，注意设置这里的偏移量，图片总数前后多出来一张，如果是5张图片就设置偏移量为屏幕宽 * 7
    _scrollView.contentSize = CGSizeMake(kSWidth * 7, 160);
    
    // 设置偏移量，因为scrollView如果设置偏移量为0时就不能再往前滑了，要实现无限滚动的功能这里设置为屏幕的宽.其实是要从第二张图片开始循环，所以设置图片时要把第一张放到当前偏移量
    _scrollView.contentOffset = CGPointMake(kSWidth, 0);
    
    _scrollView.pagingEnabled = YES;    //分页效果
    _scrollView.showsHorizontalScrollIndicator = NO;   //隐藏水平滑动条
    [self addSubview:_scrollView];
    
    // 循环创建添加到scrollView的图片
    for (int i = 0; i <= 7; i++) {
        /*
         图片放置的顺序是前后两张图片各多出来一张，存放的顺序名称：
         handover1.jpg(最后一张，handover6.jpg图片一样)
         handover2.jpg(第一张)  
         handover3.jpg  
         handover4.jpg
         handover5.jpg  
         handover6.jpg(最后一张)  
         handover7.jpg(第一张，跟handover2.jpg图片一样)
         */
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i *kSWidth, 0, kSWidth, 160)];
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"headerView%d.jpg",i + 1]];
        [_scrollView addSubview:imageView];
    }
    
    // ----------创建对象pageControl----------
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 135, kSWidth, 20)];
    _pageControl.numberOfPages = 5; // 总页数
    _pageControl.pageIndicatorTintColor = [UIColor purpleColor];    // 页颜色
    _pageControl.currentPageIndicatorTintColor = [UIColor orangeColor]; // 当前页颜色
    
    //注意这里是添加到View而不是ScrollView，如果添加到scrollView则会添加到scrollView的第一张图片，滑动一下就没了
    [self addSubview:_pageControl];
}

#pragma make - ScrollViewDelegate 一直拖拽
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    NSInteger currentPage = scrollView.contentOffset.x / kSWidth;   //当前图片所在的位置（第几张）.
    _pageControl.currentPage = currentPage - 1;// 分页控制当前页数，跟scrollView当前显示的图片的页数同步.
    
    if (currentPage == 6) { // 到第6张的时候返回0页
        _pageControl.currentPage = 0;
        scrollView.contentOffset = CGPointMake(kSWidth, 0); // scrollView偏移量
        
    }else if (currentPage == 0) {   // 到0张的时候返回5页
        _pageControl.currentPage = 5;
        scrollView.contentOffset = CGPointMake(5 * kSWidth, 0);
    }
    
    // 这样设置就可以实现我们的左右无限滑动效果了。
}

设置让定时器循环播放

// 头视图1自动播放 定时器
- (void)scrollViewTimer {

    NSInteger currentPage = _scrollView.contentOffset.x / kSWidth;
    
    //刚开始是0页，让它自增, 自增到5的时候就会自动返回1重新开始，因为实现这里方法上面那个一直拖拽的方法也会被执行, 执行到第6的时候就会返回0并重新设置当前页数和scrollView偏移量
    currentPage++;
    [_scrollView setContentOffset:CGPointMake(currentPage * kSWidth, 0) animated:YES];
    
    // 让scrollView无限循环播放完成.
}

// 添加定时器
- (void)addTimer {
    
    _timer = [NSTimer scheduledTimerWithTimeInterval:3.5 target:self selector:@selector(scrollViewTimer) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];  //  让定时器不停调用
}

#pragma make - ScrollViewDelegate 开始拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [_timer invalidate];    // 因为拖拽的时候跟定时器发生冲突，所以要设置开始拖拽的时候让定时器停止.
}

#pragma make - ScrollViewDelegate 停止拖拽
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    [self addTimer];    // 当停止拖拽的时候重新开启定时器
}

UIScrollView和UIPageControl 实现让图片无限循环播放和左右滑动设置完成，代码还是比较简单的。