美文网首页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 无限循环轮播

    项目开发中经常遇到首页要用到Banner页轮播图片,基于性能和用户体验性考虑,使用ScrollView+UIIma...

  • 无限循环图片、文字轮播器 SDCycleScrollView

    无限循环图片、文字轮播器。

  • Banner

    需求如下:(1)无限循环轮播(2)定时轮播(3)添加PageControl

  • 无限Banner轮播图

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

  • 无限图片轮播器 --- Objective-C

    KNBannerView 无限循环轮播器:本地图片,网络图片(图片缓存) 一.功能描述及要点 1.无限图片轮播器,...

  • 第三方库之 banner

    Android 广告图片轮播控件,支持无限循环和多种主题,可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加...

  • 无限循环轮播图

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

  • 任务27 - jquery实战 - 轮播

    代码 实现如下轮播效果 展示、代码 实现上述轮播效果,在一个页面有三个轮播 展示、代码 实现如下无限循环滚动轮播效...

  • 推荐广告位轮播开源库

    1.SDCycleScrollView: UIColloctView实现无限循环图片轮播器(推荐使用)。GitHu...

  • Vue-首页轮播图

    一。设置图片高度 二。设置轮播页码 loop:true设置为无限循环

网友评论

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

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