美文网首页iOS开发
ScrollView+UIImageView 无限循环轮播

ScrollView+UIImageView 无限循环轮播

作者: 逆风g | 来源:发表于2017-06-21 14:17 被阅读89次

    项目开发中经常遇到首页要用到Banner页轮播图片,基于性能和用户体验性考虑,使用ScrollView+UIImageView来实现,设计思想:用三个UIImageView来显示图片,中间的centerImageView显示当前索引下的图片,leftImageView显示前一张图片,rightImageView显示后一张图片。每当scrollView滑动停止时,重新设置三张ImageView的图片,并让scrollView显示中间额centerImageView。

    公有方法

    /*初始化*/
    -(id)initWithFrame:(CGRect)frame withUrlArr:(NSArray *)urlArr  withTapBlock:(void(^)(NSInteger selectIndex)) block;
    -(id)initWithFrame:(CGRect)frame withImgArr:(NSArray *)imgArr  withTapBlock:(void(^)(NSInteger selectIndex)) block;
    /*动画*/
    -(void)startAnimationWithInterval:(NSInteger)interval;
    -(void)stopAnimation;
    

    私有属性

    {
        BOOL _isUrl;
    }
    @property(nonatomic,copy)void (^tapBlock)(NSInteger selectIndex);
    @property(nonatomic,strong)UIScrollView     *scrollView;
    @property(nonatomic,strong)UIPageControl    *pageControl;
    @property(nonatomic,strong)NSTimer          *timer;
    @property(nonatomic)NSInteger               currentImageIndex;
    @property(nonatomic,strong)UIImageView      *leftImageView;
    @property(nonatomic,strong)UIImageView      *centerImageView;
    @property(nonatomic,strong)UIImageView      *rightImageView;
    @property(nonatomic,copy)NSArray            *imgArr;
    @property(nonatomic,copy)NSArray            *urlArr;
    

    核心代码

    -(void)reloadImage
    {
        NSInteger leftImageIndex,rightImageIndex;
        CGPoint offset=[_scrollView contentOffset];
        if (offset.x>CGRectGetWidth(self.frame)) { //向右滑动
            _currentImageIndex=(_currentImageIndex+1)%self.pageControl.numberOfPages;
        }else if(offset.x<CGRectGetWidth(self.frame)){ //向左滑动
            _currentImageIndex=(_currentImageIndex+self.pageControl.numberOfPages-1)%self.pageControl.numberOfPages;
        }
        leftImageIndex=(_currentImageIndex+self.pageControl.numberOfPages-1)%self.pageControl.numberOfPages;
        rightImageIndex=(_currentImageIndex+1)%self.pageControl.numberOfPages;
        if(_isUrl)
        {
            [_centerImageView sd_setImageWithURL:[NSURL URLWithString:_urlArr[_currentImageIndex]]];
            [_leftImageView sd_setImageWithURL:[NSURL URLWithString:_urlArr[leftImageIndex]]];
            [_rightImageView sd_setImageWithURL:[NSURL URLWithString:_urlArr[rightImageIndex]]];
        }else
        {
            _centerImageView.image=_imgArr[_currentImageIndex];
            _leftImageView.image=_imgArr[leftImageIndex];
            _rightImageView.image=_imgArr[rightImageIndex];
        }
        _pageControl.currentPage=_currentImageIndex;
    }
    

    demo下载地址,这个demo可以拿来直接用

    相关文章

      网友评论

        本文标题:ScrollView+UIImageView 无限循环轮播

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