无限轮播图

作者: Mr丶炎 | 来源:发表于2016-07-16 16:00 被阅读62次
无限轮播图.png

特别注意这个bug,第一次显示最后一张! 加上这句后,第一张就对应了

_scrollView.contentOffset = CGPointMake(width, 0);

思路:
用三个imageView,左中右,进行无限滑动!用currentNumber记录当前显示的页数,这里

当我们滑动到第一张的时候,左边应该显示最后一张图片, 下面这句就完美做到了

(_currentNumber - 1 + _imageNames.count) % _imageNames.count

当我们滑动到第最后一张的时候,右边应该显示第一张图片, 下面这句也完美做到了

(_currentNumber + 1) % _imageNames.count;

源码如下

#import "MyScrollView.h"

@interface MyScrollView ()<UIScrollViewDelegate>
/** 滑动视图 */
@property(nonatomic,strong)UIScrollView *scrollView;
/** 分页控件 */
@property(nonatomic, strong)UIPageControl *pageControl;
/** 左边视图 */
@property(nonatomic, strong)UIImageView *leftImageView;
/** 中间视图 */
@property(nonatomic, strong)UIImageView *middleImageView;
/** 右边视图 */
@property(nonatomic, strong)UIImageView *rightImageView;
/** 当前页 */
@property(nonatomic, assign)NSInteger currentNumber;
/** 定时器 */
@property (nonatomic, strong) NSTimer *timer;
/** 手势识别器 */
@property (nonatomic, strong) UITapGestureRecognizer *tapGesture;


@end


@implementation MyScrollView

-(instancetype)initWithFrame:(CGRect)frame {
    
    if (self = [super initWithFrame:frame]) {
        
    }
    
    return self;
}


-(void)setImageNames:(NSArray *)imageNames {
    
    _imageNames = imageNames;
    
    //创建子控件
    [self creatSubViews];
    
    [self startTimer];
}

#pragma mark - 1.创建子视图
-(void)creatSubViews {
    
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    
    _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
    _scrollView.delegate = self;
    _scrollView.pagingEnabled = YES;
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.showsVerticalScrollIndicator = NO;
    _scrollView.contentSize = CGSizeMake(width * 3, height);
    _scrollView.contentOffset = CGPointMake(width, 0);
    [self addSubview:_scrollView];
    
    //创建分页控件
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 30, width, 30)];
    
    _pageControl.numberOfPages = _imageNames.count;
    _pageControl.currentPage = 0;
    
    _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    
    _pageControl.currentPageIndicatorTintColor = [UIColor grayColor];
    
    [self addSubview:_pageControl];

    
    //3.创建左中右三个图片视图
    _leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
    
    _middleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(width, 0, width, height)];
    
    _rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(width *2 , 0, width, height)];
    
    
    [_scrollView addSubview:_leftImageView];
    [_scrollView addSubview:_middleImageView];
    [_scrollView addSubview:_rightImageView];
    
    //设置单击手势
    _tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
    _tapGesture.numberOfTapsRequired = 1;
    _tapGesture.numberOfTouchesRequired = 1;
    [_scrollView addGestureRecognizer:_tapGesture];
    
    [self loadImage];
}

#pragma mark 单击手势
-(void)handleTap:(UITapGestureRecognizer*)sender
{
    // 判断代理有没有这个方法
    if ([self.delegate respondsToSelector:@selector(didClickPage:atIndex:)]) {
        [self.delegate didClickPage:self atIndex:_currentNumber];
    }
}

-(void)loadImage {
    
    _middleImageView.image = [UIImage imageNamed:_imageNames[_currentNumber]];
    
    
    NSInteger leftIndex = (_currentNumber - 1 + _imageNames.count) % _imageNames.count;
    _leftImageView.image = [UIImage imageNamed:_imageNames[leftIndex]];
    
    
    NSInteger rightIndex = (_currentNumber + 1) % _imageNames.count;
    _rightImageView.image = [UIImage imageNamed:_imageNames[rightIndex]];

    
    // 设置分页控件的当前页数
    _pageControl.currentPage = _currentNumber;
}


#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
    //1.判断滑动方向
    if (scrollView.contentOffset.x > scrollView.bounds.size.width) {//向左滑动
        
        _currentNumber = (_currentNumber + 1) % _imageNames.count;
        
    }else if(scrollView.contentOffset.x < scrollView.bounds.size.width){ //向右滑动
        _currentNumber = (_currentNumber - 1 + _imageNames.count) % _imageNames.count;
        
    }
    
    [self loadImage];
    
    scrollView.contentOffset = CGPointMake(_scrollView.bounds.size.width, 0);
    
}


- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [self stopTimer];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    [self startTimer];
}

#pragma mark - 定时器方法
- (void)stopTimer {
    [self.timer invalidate];
    self.timer = nil;
}

- (void)startTimer {
    
    self.timer =  [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
    
}

/** 下一页 */
- (void)nextPage {
    
    // 说明向左在滑动
    _currentNumber = (_currentNumber + 1) % _imageNames.count;
    
    [self loadImage];
    
    //a) 偏移量设置
    _scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
    
}
@end

相关文章

  • [iOS]定制性强的广告轮播图--SCAdView

    @[无限轮播图] @[3D轮播图] @[广告轮播图] SCAdView Statement If my code ...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 无限循环轮播图

    无限循环轮播图 在工作的过程中,很多情况下会遇到要使用轮播图,相信大家也遇到过,使用轮播图的话分两种情况:不能无限...

  • android轮播图效果

    先上效果图: viewpager+handler+runnableTask实现轮播图效果。可以自动轮播,左右无限滑...

  • 无限轮播图

    特别注意这个bug,第一次显示最后一张! 加上这句后,第一张就对应了 思路:用三个imageView,左中右,进行...

  • Swift实现轮播图以及自定义UIPageControl

    无限轮播的实现思路 轮播图最核心的部分是如何实现无限轮播。我的实现方式是: 在UIScrollView上添加三个U...

  • 轮播图:无限轮播(三图轮播原理)

    前言 所谓三图轮播原理:只创建三个imageView,用来显示多于多张图片,其中心思想是每次都让中间的imageV...

  • 无限Banner轮播图

    GJImageCarouselView 自己写的Banner轮播图,自动循环,无限轮播。可以设置时间间隔、占位图。...

  • ios无限轮播图

    一个非常简单但很实用的无限轮播图(swift版本)UICollectionView无限轮播效果已经有很多前辈定制过...

  • 打造万能的BannerView(ViewPager)无限轮播图

    为什么写这篇文章,因为在网上看到的绝大多数BannerView实现了右无限轮播图,甚至没有实现无限轮播图,说成是无...

网友评论

    本文标题:无限轮播图

    本文链接:https://www.haomeiwen.com/subject/ijdujttx.html