类似淘宝首页轮播图的实现

首页先上效果图

1.gif

---

主要功能：

• 实现自动轮播与手动切换模式
• 设置自动轮播时间
• 支持点击事件

---

1.创建3个View，分别用来显示前一张照片、当前照片、后一张照片

    if (_currentPage==0) {
    _firstView = [_imageArray lastObject];
    _middleView = [_imageArray objectAtIndex:_currentPage];
    _lastView = [_imageArray objectAtIndex:_currentPage+1];
  }
  else if (_currentPage == _imageArray.count-1)
  {
    _firstView = [_imageArray objectAtIndex:_currentPage-1];
    _middleView = [_imageArray objectAtIndex:_currentPage];
    _lastView = [_imageArray firstObject];
  }
  else
  {
    _firstView = [_imageArray objectAtIndex:_currentPage-1];
    _middleView = [_imageArray objectAtIndex:_currentPage];
    _lastView = [_imageArray objectAtIndex:_currentPage+1];
  }

  //设置三个view的frame，加到scrollview上
  _firstView.frame = CGRectMake(0, 0, kViewWidth, KViewHeight);
  _middleView.frame = CGRectMake(kViewWidth, 0, kViewWidth, KViewHeight);
  _lastView.frame = CGRectMake(kViewWidth*2, 0, kViewWidth, KViewHeight);

  [_scrollView addSubview:_firstView];
  [_scrollView addSubview:_middleView];
  [_scrollView addSubview:_lastView];
  //显示中间的那一张图片，也就是CurrentPage
   _scrollView.contentOffset = CGPointMake(kViewWidth, 0);

2.实现ScorollView的代理方法，在停止拖拽的时候调用

  -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//手动滑动时候暂停自动替换
[_autoScrollTimer invalidate];
_autoScrollTimer = nil;
_autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:_timeInterval target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];

//得到当前页数
float x = _scrollView.contentOffset.x /kViewWidth;
//往前翻
if (x <= 0) {
    if (_currentPage-1 < 0) {
        _currentPage = _imageArray.count-1;
    }else{
        _currentPage --;
    }
}
//往后翻
if (x >= 2) {
    if (_currentPage == _imageArray.count-1) {
        _currentPage = 0;
    }else{
        _currentPage ++;
    }
}
self.isDragging = YES;
[self reloadData];
}  

3.实现定时器自动滚动

-(void)setIsAutoScroll:(BOOL)isAutoScroll
{
_isAutoScroll = isAutoScroll;

if (isAutoScroll) {  
    if (!_autoScrollTimer) {
        _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:_timeInterval target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];
    }
}else {  
    if (_autoScrollTimer.isValid) {
        [_autoScrollTimer invalidate];
        _autoScrollTimer = nil;
    }
}

4.定时器执行的自动切换的方法

-(void)autoShowNextImage
{
if (_currentPage == _imageArray.count-1) {
    _currentPage = 0;
}else{
    _currentPage ++;
}
[self reloadData];  //更新数据、重新展示

}

5.动画优化
设立一个标志位isDragging,默认不拖拽的情况下isDragging为NO，执行切换动画。
在调用scrollViewDidEndDecelerating:(UIScrollView *)scrollView后设置isDragging为YES，不执行动画。

if (!self.isDragging) {
        _scrollView.contentOffset = CGPointMake(0, 0);
        [UIView animateWithDuration:0.5 animations:^{
            _scrollView.contentOffset = CGPointMake(kViewWidth, 0);
        } completion:^(BOOL finished) {
        }];
    }else
    {
        _scrollView.contentOffset = CGPointMake(kViewWidth, 0);
        self.isDragging = NO;
    }

6.代理的实现，监听点击事件，回传CurrentPage

_tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
_tapGesture.numberOfTapsRequired = 1;
_tapGesture.numberOfTouchesRequired = 1;
[_scrollView addGestureRecognizer:_tapGesture];

-(void)handleTap:(UITapGestureRecognizer*)sender
{
if ([self.delegate respondsToSelector:@selector(didClickPage:atIndex:)]) {
    [self.delegate didClickPage:self atIndex:_currentPage];
  }
}

7.最后附上Demo的github地址，欢迎大家Star
github项目地址