iOS ScrollView自动循环滑动

有些时候我们项目会在首页显示一些自动滑动的广告， 需要用到scrollview来编写，

 

具体思路是，

1.需要在scrollview上面添加三个imageview，下面以显示三张图片为例子，

我们需要把要默认显示的第一张image放在中间，那左边就需要放第三张图片，右边放第二张图片

例如 展示顺序默认是第三张，第一张，第二张（312）, 向右滑动一次就是第二张，第三张，第一张（231），，， 依次顺序类推，

向左滑动默认是是312，向左滑动一次展示顺序是123，

ViewController.h

#import "ViewController.h"

#define kScreenWidth [UIScreen mainScreen].bounds.size.width

@interface ViewController ()<UIScrollViewDelegate>

{

    NSInteger _currentIndex;

    NSTimeInterval _sliderTime; //滑动间隔时间

}

@property(nonatomic,strong)UIScrollView *scrollerView;

@property(nonatomic,strong)NSTimer *timer; //定时器

@property (strong, nonatomic)UIPageControl *pageControl; //底部滑动点

@property(nonatomic,strong)NSMutableArray <UIImageView *> *mutView;

@property (nonatomic, strong) NSMutableArray *imageData; //存储Image

@end

 

 ViewController.m

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view.

    

    self.view.backgroundColor = [UIColor whiteColor];

    

    [self initScrollView];

    [self initImgView];

    [self initPageControl];

    

    //设置自动滑动间隔时间

    _sliderTime = 2.0f;

    //设置可滑动区域

    _scrollerView.contentSize = CGSizeMake(_scrollerView.frame.size.width * _mutView.count, 0);

    //默认在中间位置

    _scrollerView.contentOffset = CGPointMake(_scrollerView.frame.size.width, 0);

    

    //开启定时器

    _timer = [NSTimer scheduledTimerWithTimeInterval:_sliderTime target:self selector:@selector(scrollerChange) userInfo:nil repeats:YES];

}

 

加载图片，初始化滑动页面滑动条，

/**

 加载图片

 */

-(NSMutableArray *)imageData{

    if (!_imageData) {

        _imageData = [NSMutableArray array];

        for (int i = 1; i < 4; i++) {

            [_imageData addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d.png",i]]];

        }

    }

    return _imageData;

}

/**

 初始化滑动view

 */

-(void)initScrollView{

    if(!_scrollerView){

        _scrollerView = [[UIScrollView alloc] initWithFrame:CGRectMake(20, 98 + 40, kScreenWidth - 20 *2, 100)];

        _scrollerView.pagingEnabled = YES;

        _scrollerView.delegate = self;

        _scrollerView.layer.cornerRadius = 20.0f;

        _scrollerView.layer.masksToBounds = YES;

        _scrollerView.showsVerticalScrollIndicator = NO;

        _scrollerView.showsHorizontalScrollIndicator = NO;

        [self.view addSubview:_scrollerView];

    }

}

/**

 初始化滑动条

 */

-(void)initPageControl{

    if(!_pageControl){

        _pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(CGRectGetMidX(_scrollerView.frame) - 50, CGRectGetMaxY(_scrollerView.frame) - 20, 100, 20)];

        CGSize size= [_pageControl sizeForNumberOfPages:_mutView.count];

        _pageControl.bounds=CGRectMake(0, 0, size.width, size.height);

        _pageControl.pageIndicatorTintColor=[UIColor colorWithRed:193/255.0 green:219/255.0 blue:249/255.0 alpha:1];

        //设置当前页颜色

        _pageControl.currentPageIndicatorTintColor=[UIColor colorWithRed:0 green:150/255.0 blue:1 alpha:1];

        _pageControl.numberOfPages = _mutView.count;

        _pageControl.currentPage = 0;

        [self.view addSubview:_pageControl];

    }

}

/**

 初始化滑动页面

 */

-(void)initImgView{

    if(!_mutView){

        _mutView = [NSMutableArray new];

        for (NSInteger i=0; i<3; i++) {

            UIImageView *imgView = [UIImageView new];

            imgView.frame = CGRectMake(i*_scrollerView.frame.size.width, 0, _scrollerView.frame.size.width, 100);

            imgView.contentMode=UIViewContentModeScaleToFill;

            [_scrollerView addSubview:imgView];

            [_mutView addObject:imgView];

        }

        //加载左边位置图片

        _mutView[0].image = self.imageData.lastObject;

        //加载中间位置图片

        _mutView[1].image = self.imageData.firstObject;

        //加载右边位置图片

        _mutView[2].image = self.imageData[1];

    }

}

 

-(void)scrollerChange{

    NSInteger leftIndex,rightIndex;

    

    //向右滑动

    _currentIndex = (_currentIndex + 1)%_mutView.count;

    

    //重新设置中间图片

    _mutView[1].image = self.imageData[_currentIndex];

    

    //重新设置左右图片

    leftIndex = (_currentIndex + _mutView.count - 1) % _mutView.count;

    rightIndex = (_currentIndex + 1) % _mutView.count;

    

    _mutView[0].image = self.imageData[leftIndex];

    _mutView[2].image = self.imageData[rightIndex];

    

    //向右滑动动画

    __weak typeof(self) weakSelf = self;

    [UIView animateWithDuration:0.5 animations:^{

        weakSelf.scrollerView.contentOffset = CGPointMake(weakSelf.scrollerView.frame.size.width * 2, 0);

    } completion:^(BOOL finished) {

        

    }];

    

    //重置当前位置

    _scrollerView.contentOffset = CGPointMake(_scrollerView.frame.size.width, 0);

    _pageControl.currentPage = _currentIndex;

}

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

    [_timer invalidate];

    _timer = nil;

}

 

/*

更新图片

*/

-(void)updateImage{

    NSInteger leftIndex,rightIndex;

    

    CGPoint offset = _scrollerView.contentOffset;

    CGSize scrollerViewSize = _scrollerView.frame.size;

    

    if(offset.x > scrollerViewSize.width){  //向左滑动

        _currentIndex = (_currentIndex + 1)%_mutView.count;

    }else if(offset.x < scrollerViewSize.width){ // 向右滑动

        _currentIndex = (_mutView.count -1 + _currentIndex)%_mutView.count;

    }

    

    //重新设置中间图片

    _mutView[1].image = self.imageData[_currentIndex];

    

    //重新设置左右图片

    leftIndex = (_currentIndex + _mutView.count - 1) % _mutView.count;

    rightIndex = (_currentIndex + 1) % _mutView.count;

    

    _mutView[0].image = self.imageData[leftIndex];

    _mutView[2].image = self.imageData[rightIndex];

}

滑动结束之后更新图片 

/**

 滑动结束

 */

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

    

    //更新图片

    [self updateImage];

    

    //重置当前页面位置

    _scrollerView.contentOffset = CGPointMake(scrollView.frame.size.width, 0);

    

    //更新底部滑动条

    _pageControl.currentPage = _currentIndex;

    

    //滑动结束开启自动滑动定时

    if(!_timer){

        _timer = [NSTimer scheduledTimerWithTimeInterval:_sliderTime target:self selector:@selector(scrollerChange) userInfo:nil repeats:YES];

    }

}

 

展示结果 

 

demo 地址： https://gitee.com/jwsource/jwsource