iOS轮播图

该demo中，加载网络图片采用第三方库SDWebImage

（使用时拷贝下面的代码即可）

1、新建一个继承UIView的类：JJRollBanner

JJRollBanner.h头文件中的代码：

#import <UIKit/UIKit.h>

#import "UIImageView+WebCache.h"

@class JJRollBanner;

@protocol JJRollBannerDelegate <NSObject>

/**

 *  选择图片

 *

 *  @param index 图片image View的tag值

 */

-(void)didSelectImage:(NSInteger)index;

@end

@interface JJRollBanner : UIView

-(instancetype)initWithFrame:(CGRect)frame;

/************************************************************/

/******** durationTimer, currentPageColor, pageColor ********/

/********    在调用这些参数的时候最好在添加图片数组之前     ********/

/************************************************************/

/**

 *  定时器执行的时间

 *  默认是 3.0 秒

 */

@property (assign, nonatomic) CGFloat durationTimer;

/**

 *  当前点的颜色

 *  默认 －－ 红色

 */

@property (strong, nonatomic) UIColor *currentPageColor;

/**

 *  点的背景颜色

 *  默认 －－ 亮灰色

 */

@property (strong, nonatomic) UIColor *pageColor;

/**

 *  加载本地图片

 */

@property (strong, nonatomic) NSArray *loactionImageArray;

/**

 *  加载网路图片

 */

@property (strong, nonatomic) NSArray *lineImageArray;

/**

 *  代理

 */

@property (weak, nonatomic) id<JJRollBannerDelegate> delegate;

/**

 *  更新的时候调用

 *

 *  @param array 本地图片数组

 */

-(void)refreshRollWithLocationArray:(NSArray*)loactionImageArray;

/**

 *  更新的时候调用

 *

 *  @param array 网络图片数组

 */

-(void)refreshRollWithNetworkArray:(NSArray *)lineImageArray;

@end

JJRollBanner.m文件中实现方法代码：

#import "JJRollBanner.h"

@interface JJRollBanner ()<UIScrollViewDelegate>

/**

 *  滚动视图

 */

@property (strong, nonatomic) UIScrollView *bannerScrollView;

/**

 *  点

 */

@property (strong, nonatomic) UIPageControl *pageView;

/**

 *  定时器

 */

@property (strong, nonatomic) NSTimer *timer;

/**

 *  纪录图片数组的个数

 */

@property (assign, nonatomic) NSInteger count;

@end

@implementation JJRollBanner

/**

 *  轮播滚动图片的实现方法

 *  

 *  1、实际上scrollerView上的图片的数量要比实际图片多俩张（第一张和最后一张）

 *  2、将最后一张图片放在scrollerView的contentOffSet的第二个位置，第一张图片放到最后＋1的位置

 *  

 *  假如有6张图片 A、B、C、D、E、F

 *  那么排列方式 F、A、B、C、D、E、F、A

 *  

 *  scrollview显示的起始位置是contentOffSet.x = CGPoint(width, 0);width为scrollview的宽度

 *

 *  实现方式

 *  当从左往右滑到达最后A的时候跳到左边的A的位置

 *

 *

 *

 *  当从右往左滑到达最后F的时候跳到右边的F的位置

 */

/*

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

    // Drawing code

}

*/

-(instancetype)initWithFrame:(CGRect)frame

{

     self = [super initWithFrame:frame];

    

    if (self) {

        

        /**

         *  初始化scrollview

         */

        [self initScrollView];

        

        /**

         *  初始化pagecontrol

         */

        [self initPageControl];

    }

    return self;

}

-(void)initScrollView

{

    self.bannerScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];

    self.bannerScrollView.showsHorizontalScrollIndicator = NO;

    self.bannerScrollView.showsVerticalScrollIndicator = NO;

    self.bannerScrollView.pagingEnabled = YES;

    self.bannerScrollView.scrollEnabled = YES;

    self.bannerScrollView.delegate = self;

    [self addSubview:self.bannerScrollView];

}

-(void)initPageControl

{

    float width = self.bannerScrollView.frame.size.width;

    float page_width = 160;

    float height = self.bannerScrollView.frame.size.height;

    

    self.pageView = [[UIPageControl alloc] initWithFrame:CGRectMake((width - page_width) / 2, height - 20, page_width, 20)];

    /**

     *  当前点的颜色

     */

    if(self.currentPageColor == nil) {

        self.pageView.currentPageIndicatorTintColor = [UIColor redColor];

    }else{

        self.pageView.currentPageIndicatorTintColor = self.currentPageColor;

    }

    /**

     *  所有点的背景颜色

     */

    if (self.pageColor == nil) {

        self.pageView.pageIndicatorTintColor = [UIColor lightGrayColor];

    }else{

        self.pageView.pageIndicatorTintColor = self.pageColor;

    }

    

    [self addSubview:self.pageView];

}

/**

 *  加载本地图片

 *

 *  @param loactionImageArray 本地图片名称

 */

-(void)setLoactionImageArray:(NSArray *)loactionImageArray

{

    _loactionImageArray = loactionImageArray;

    /**

     *  图片的数量

     */

    self.count = loactionImageArray.count;

    /**

     *  图片的宽高

     */

    CGFloat placeWidth = self.frame.size.width;

    CGFloat placeHeight = self.frame.size.height;

    

    /**

     *  图片填充

     */

    for(NSInteger index = 0; index < self.count; index++)

    {

        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((index + 1) * placeWidth, 0, placeWidth, placeHeight)];

        imageView.tag = 100 + index;

        imageView.image = [UIImage imageNamed:loactionImageArray[index]];

        /**

         *  铺满

         */

        imageView.layer.masksToBounds = YES;

        imageView.contentMode = UIViewContentModeScaleAspectFill;

        imageView.userInteractionEnabled = YES;

        

        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(chooseImage:)];

        [imageView addGestureRecognizer:tap];

        

        [self.bannerScrollView addSubview:imageView];

    }

    

    UIImageView *firstImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, placeWidth, placeHeight)];

    firstImage.tag = self.count + 100;

    firstImage.image = [UIImage imageNamed:[loactionImageArray lastObject]];

    firstImage.userInteractionEnabled = YES;

    /**

     *  铺满

     */

    firstImage.layer.masksToBounds = YES;

    firstImage.contentMode = UIViewContentModeScaleAspectFill;

    

    

    UITapGestureRecognizer *tap_first = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(chooseImage:)];

    [firstImage addGestureRecognizer:tap_first];

    [self.bannerScrollView addSubview:firstImage];

    

    UIImageView *lastImage = [[UIImageView alloc] initWithFrame:CGRectMake((self.count + 1) * placeWidth, 0, placeWidth, placeHeight)];

    lastImage.tag = 100;

    lastImage.image = [UIImage imageNamed:[loactionImageArray firstObject]];

    lastImage.userInteractionEnabled = YES;

    /**

     *  铺满

     */

    lastImage.layer.masksToBounds = YES;

    lastImage.contentMode = UIViewContentModeScaleAspectFill;

    

    UITapGestureRecognizer *tap_last = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(chooseImage:)];

    [firstImage addGestureRecognizer:tap_last];

    [self.bannerScrollView addSubview:lastImage];

    

    self.bannerScrollView.contentOffset = CGPointMake(placeWidth, 0);

    self.bannerScrollView.contentSize = CGSizeMake((self.count + 2) * placeWidth, placeHeight);

    

    self.pageView.numberOfPages = self.count;

    self.pageView.currentPage = 0;

    

    if(self.pageColor != nil || self.currentPageColor != nil)

    {

        [self fillPageColor];

    }

    

    [self createTimer];

}

/**

 *  加载网络图片

 *

 *  @param lineImageArray 图片链接数组

 */

-(void)setLineImageArray:(NSArray *)lineImageArray

{

    _lineImageArray = lineImageArray;

    

    self.count = lineImageArray.count;

    

    CGFloat placeWidth = self.frame.size.width;

    CGFloat placeHeight = self.frame.size.height;

    

    /**

     *  图片填充

     */

    for(NSInteger index = 0; index < self.count; index++)

    {

        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((index + 1) * placeWidth, 0, placeWidth, placeHeight)];

        imageView.tag = 100 + index;

        [imageView sd_setImageWithURL:[NSURL URLWithString:lineImageArray[index]] placeholderImage:[UIImage imageNamed:@"img_01.jpg"] completed:nil];

        /**

         *  铺满

         */

        imageView.layer.masksToBounds = YES;

        imageView.contentMode = UIViewContentModeScaleAspectFill;

        imageView.userInteractionEnabled = YES;

        

        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(chooseImage:)];

        [imageView addGestureRecognizer:tap];

        

        [self.bannerScrollView addSubview:imageView];

    }

    

    UIImageView *firstImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, placeWidth, placeHeight)];

    firstImage.tag = self.count + 100;

    [firstImage sd_setImageWithURL:[NSURL URLWithString:[lineImageArray lastObject]] placeholderImage:[UIImage imageNamed:@"img_01.jpg"] completed:nil];

    /**

     *  铺满

     */

    firstImage.layer.masksToBounds = YES;

    firstImage.contentMode = UIViewContentModeScaleAspectFill;

    firstImage.userInteractionEnabled = YES;

    

    UITapGestureRecognizer *tap_first = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(chooseImage:)];

    [firstImage addGestureRecognizer:tap_first];

    [self.bannerScrollView addSubview:firstImage];

    

    UIImageView *lastImage = [[UIImageView alloc] initWithFrame:CGRectMake((self.count + 1) * placeWidth, 0, placeWidth, placeHeight)];

    lastImage.tag = 100;

    [lastImage sd_setImageWithURL:[NSURL URLWithString:[lineImageArray firstObject]] placeholderImage:[UIImage imageNamed:@"img_01.jpg"] completed:nil];

    /**

     *  铺满

     */

    lastImage.layer.masksToBounds = YES;

    lastImage.contentMode = UIViewContentModeScaleAspectFill;

    lastImage.userInteractionEnabled = YES;

    

    UITapGestureRecognizer *tap_last = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(chooseImage:)];

    [firstImage addGestureRecognizer:tap_last];

    [self.bannerScrollView addSubview:lastImage];

    

    self.bannerScrollView.contentOffset = CGPointMake(placeWidth, 0);

    self.bannerScrollView.contentSize = CGSizeMake((self.count + 2) * placeWidth, placeHeight);

    

    self.pageView.numberOfPages = self.count;

    self.pageView.currentPage = 0;

    

    if(self.pageColor != nil || self.currentPageColor != nil)

    {

        [self fillPageColor];

    }

    

    [self createTimer];

}

/**

 *  填充pagecontrol的颜色

 */

-(void)fillPageColor

{

    /**

     *  当前点的颜色

     */

    if(self.currentPageColor == nil) {

        self.pageView.currentPageIndicatorTintColor = [UIColor redColor];

    }else{

        self.pageView.currentPageIndicatorTintColor = self.currentPageColor;

    }

    /**

     *  所有点的背景颜色

     */

    if (self.pageColor == nil) {

        self.pageView.pageIndicatorTintColor = [UIColor lightGrayColor];

    }else{

        self.pageView.pageIndicatorTintColor = self.pageColor;

    }

}

/**

 *  更新本地图片

 *

 *  @param loactionImageArray 本地图片数组

 */

-(void)refreshRollWithLocationArray:(NSArray *)loactionImageArray

{

    /**

     *  更新之前先把之前的定时器给关掉

     */

    [self pauseTimer];

    /**

     *  调用加载本地图片的方法

     */

    [self setLoactionImageArray:loactionImageArray];

}

/**

 *  更新网络图片

 *

 *  @param loactionImageArray 网络图片数组

 */

-(void)refreshRollWithNetworkArray:(NSArray *)lineImageArray

{

    /**

     *  更新之前先把之前的定时器给关掉

     */

    [self pauseTimer];

    /**

     *  调用加载网路图片的方法

     */

    [self setLineImageArray:lineImageArray];

}

/**

 *  滚动定时器的添加

 */

-(void)createTimer

{

    if(!self.durationTimer)

    {

        self.durationTimer = 3.0f;

    }

    

    self.timer = [NSTimer scheduledTimerWithTimeInterval:self.durationTimer target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

    

    NSRunLoop *runLoop = [NSRunLoop mainRunLoop];

    [runLoop addTimer:self.timer forMode:NSRunLoopCommonModes];

}

/**

 *  定时器停止工作

 */

-(void)pauseTimer

{

    [self.timer invalidate];

    self.timer = nil;

}

-(void)nextImage

{

    CGFloat width = self.bannerScrollView.frame.size.width;

    NSInteger index = self.pageView.currentPage;

   

    if (index == self.count + 1) {

        index = 0;

    } else {

        index++;

    }

    [self.bannerScrollView setContentOffset:CGPointMake((index + 1) * width, 0)animated:YES];

}

/**

 *  选择图片事件

 *

 *  @param tap 手势

 */

-(void)chooseImage:(UITapGestureRecognizer*)tap

{

    if (self.delegate) {

        

        [self.delegate didSelectImage:(tap.view.tag - 100)];

    }

}

/**

 *  开始拖动的时候，定时器停止

 *

 *  @param scrollView 滚动视图

 */

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{

    [self pauseTimer];

}

/**

 *  停止拖动的时，定时器启动

 */

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{

    [self createTimer];

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    CGFloat width = self.bannerScrollView.frame.size.width;

    /**

     *  目的是计算page

     *  其实用 self.bannerScrollView.contentOffset.x ／ width 也可以，

     *  但为了更加严谨点，取图片的中点 ／ width

     */

    NSInteger index = (self.bannerScrollView.contentOffset.x + width * 0.5) / width;

    

    if (index == self.count + 2) {

        index = 1;

    } else if(index == 0) {

        index = self.count;

    }

    self.pageView.currentPage = index - 1;

   

}

-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{

    [self scrollViewDidEndDecelerating:scrollView];

}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    CGFloat width = self.bannerScrollView.frame.size.width;

    int index = (self.bannerScrollView.contentOffset.x + width * 0.5) / width;

    if (index == self.count + 1) {

        

        [self.bannerScrollView setContentOffset:CGPointMake(width, 0) animated:NO];

    } else if (index == 0) {

        

        [self.bannerScrollView setContentOffset:CGPointMake(self.count * width, 0) animated:NO];

    }

}

@end

在使用的viewController中的使用方法：

#import "ViewController.h"

#import "JJRollBanner.h"

@interface ViewController ()<JJRollBannerDelegate>

{

    JJRollBanner *rollView;

   

}

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    rollView = [[JJRollBanner alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 180)];

    

    NSMutableArray *array = [NSMutableArray array];

    for(int i = 0; i < 6; i++)

    {

        NSString *string = [NSString stringWithFormat:@"img_%02d.jpg", i + 1];

        [array addObject:string];

    }

    [rollView setLoactionImageArray:array];

    rollView.delegate = self;

    

    [self.view addSubview:rollView];

}

-(void)didSelectImage:(NSInteger)index

{

    NSLog(@"点击了第 %ld 张图片 ", index + 1);

}