当前位置: 首页 > 编程笔记 >

iOS实现轮播图banner示例

公孙慎之
2023-03-14
本文向大家介绍iOS实现轮播图banner示例,包括了iOS实现轮播图banner示例的使用技巧和注意事项,需要的朋友参考一下

楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉

类型后面有*号 如用使用 请自行加上。。。。。

代码:.h 文件

@protocol TJXViewDelegate<NSObject>
//判断点击的那个
-(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage;
@end
@interface TJXView : UIView
@property (nonatomic,weak)id<TJXViewDelegate>delegate;
//传一个frame 和 装有图片名字的数组过来
//参数一:frame
//参数二:装有图片名字的数组
//参数三:BOOL如果是YES,那么自动滚动,如果是NO不滚动
-(id)initWithFrame:(CGRect)frame andImageNameArray:
(NSMutableArray * )imageNameArray andIsRunning:(BOOL)isRunning;
@end

.m文件

@interface TJXView()<UIScrollViewDelegate>
{
  NSInteger _currentPage; //记录真实的页码数
  NSTimer *_timer; //生命一个全局变量
}
@property (nonatomic,assign) BOOL isRun;
@property (nonatomic,strong) NSMutableArray *imageArray;//存储图片的名字
@property (nonatomic,strong) UIScrollView *scrollView;
@property (nonatomic,strong) UIPageControl *pageControl;
@property (nonatomic,assign) CGFloat width;//view的宽
@property (nonatomic,assign) CGFloat height;//view的高
@end

-(id)initWithFrame:(CGRect)frame andImageNameArray:(NSMutableArray *)imageNameArray andIsRunning:(BOOL)isRunning{
  self = [super initWithFrame:frame];
  if (self) {
    _width = self.frame.size.width;
    _height = self.frame.size.height;
    //arrayWithArray 把数组中的内容放到一个数组中返回
    self.imageArray = [NSMutableArray arrayWithArray:imageNameArray];
    //在数组的尾部添加原数组第一个元素
    [self.imageArray addObject:[imageNameArray firstObject]];
    //在数组的首部添加原数组最后一个元素
    [self.imageArray insertObject:[imageNameArray lastObject] atIndex:0];
    self.isRun = isRunning;
    _currentPage = 0;
    [self createSro];
    [self createPageControl];
    [self createTimer];
  }
  return self;
}
-(void)createTimer{
  if (_isRun == YES) {
    _timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(change) userInfo:nil repeats:YES ];
    [[NSRunLoop currentRunLoop]addTimer:_timer forMode:NSRunLoopCommonModes];  }
}
-(void)change{
  //1获得当前的点
  CGPoint point = _scrollView.contentOffset;
  //2求得将要变换的点
  CGPoint endPoint = CGPointMake(point.x+_width, 0);
  //判断
  if (endPoint.x == (self.imageArray.count-1)*_width) {
    [UIView animateWithDuration:0.25 animations:^{
      _scrollView.contentOffset = CGPointMake(endPoint.x, 0);
    } completion:^(BOOL finished) {
      //动画完成的block
      _scrollView.contentOffset = CGPointMake(_width, 0);
      CGPoint realEnd = _scrollView.contentOffset;
      //取一遍页码数
      _currentPage = realEnd.x/_width;
      _pageControl.currentPage = _currentPage-1;
    }];
  }
  else{
    //0.25s中更改一个图片
    [UIView animateWithDuration:0.25 animations:^{
      _scrollView.contentOffset = endPoint;
    } completion:^(BOOL finished) {
    }];
        CGPoint realEnd = _scrollView.contentOffset;
    //取一遍页码数
    _currentPage = realEnd.x/_width;
    _pageControl.currentPage = _currentPage-1;
  }  
}
//创建页码指示器
-(void)createPageControl{
  _pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(_width-200, _height-30, 100, 30)];
  _pageControl.centerX = _width/2;
  _pageControl.numberOfPages = self.imageArray.count-2;
  _pageControl.pageIndicatorTintColor = WP_GRAY_COLOR;
  _pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
  _pageControl.userInteractionEnabled = NO;
  [self addSubview:_pageControl];
}
//创建滚动视图
-(void)createSro{
  _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, _width, _height)];
  _scrollView.contentSize = CGSizeMake(_width*self.imageArray.count, _height);
  for (int i = 0; i < self.imageArray.count; i++) {
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(i*_width, 0, _width, _height)];
//    imageView.image = [UIImage imageNamed:self.imageArray[i]];
    [imageView sd_setImageWithURL:self.imageArray[i] placeholderImage:[UIImage imageNamed:@"home_banner_blank"]];
    imageView.userInteractionEnabled = YES;
    imageView.tag = 200+i;
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
    [imageView addGestureRecognizer:tap];
    [_scrollView addSubview:imageView];
  }
  //水平指示条不显示
  _scrollView.showsHorizontalScrollIndicator = NO;
  //关闭弹簧效果
  _scrollView.bounces = NO;
  //设置用户看到第一张
  _scrollView.contentOffset = CGPointMake(_width, 0);
  //设置代理
  _scrollView.delegate = self;
  //分页效果
  _scrollView.pagingEnabled = YES;
  [self addSubview:_scrollView];
}
-(void)tap:(UITapGestureRecognizer *)tap{
  if(_delegate&&[_delegate respondsToSelector:@selector(sendImageName:andName:)]){
    [_delegate sendImageName:self andName:tap.view.tag-201];
  }else{
    NSLog(@"没有设置代理或者没有事先协议的方法");
  } 
}
#pragma mark UIScrollViewDelegate
//停止滚动
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
  if (_timer) {
    [_timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:2]];
  }
  //图片的个数 1 2 3 4 5 6 7 8
  //真实的页码 0 1 2 3 4 5 6 7
  //显示的页码  0 1 2 3 4 5
  CGPoint point = _scrollView.contentOffset;
  if (point.x == (self.imageArray.count-1)*_width) {
    scrollView.contentOffset = CGPointMake(_width, 0);
  }
  if (point.x == 0) {
    scrollView.contentOffset = CGPointMake((self.imageArray.count-2)*_width, 0);
  }
  //取一遍页码数
  CGPoint endPoint = scrollView.contentOffset;
  _currentPage = endPoint.x/_width;
  _pageControl.currentPage = _currentPage-1;
}
//手指开始触摸的时候,停止计时器
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
  if (_timer) {
    //如果有,停掉
    [_timer setFireDate:[NSDate distantFuture]];
  }
}

在项目中  导入头文件  遵守代理

    TJXView * TJXView = [[TJXView alloc]initWithFrame:CGRectMake(0, 0, WPSCREEN_WIDTH, 100*WPSCREEN_HIGTH_RATIO) andImageNameArray:self.bannerImager andIsRunning:YES];
    TJXView.delegate = self;
    [self.view addSubview: TJXView];
#pragma mark TJXViewDelegate
-(void)sendImageName:(TJXView *) TJXView andName:(NSInteger)selectImage{
   KKLog(@"%ld",(long)selectImage);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序实现banner图轮播效果,包括了微信小程序实现banner图轮播效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现banner图轮播的具体代码,供大家参考,具体内容如下 效果图: js: wxml: wxss: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍两行IOS代码实现轮播图,包括了两行IOS代码实现轮播图的使用技巧和注意事项,需要的朋友参考一下 此篇文章讲述IOS轮播图,仅需要几步就可以完成,很简单了。 第一步:利用cocopods导入KJBannerView组件 第二步:在m文件加入代理 第三步:实现就仅此一步 实现 实现轮播图只要上面这步骤就可以了 此处用的是本地图片,因此需要自己导入相关图片,到项目工程里面 亲测可行,放心

  • 本文向大家介绍jQuery实现的3D版图片轮播示例【滑动轮播】,包括了jQuery实现的3D版图片轮播示例【滑动轮播】的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的3D版图片轮播。分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个 怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好描述啊!!) 贴代码比较方便。。。 布局

  • 本文向大家介绍iOS实现无限循环轮播图效果,包括了iOS实现无限循环轮播图效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iOS实现无限循环轮播图的具体代码,供大家参考,具体内容如下 轮播图基础控件,左滑右滑都能无限循环 预览 思路 (1)在第一张左边加一张最后一张的图片,往左滑到边缘结束后计算偏移量迅速定位成最后一张 (2)总共只有左、中、右三个页面,每次滑动后重新进行数据跟页

  • 本文向大家介绍IOS 开发之网络图片轮播图的实现,包括了IOS 开发之网络图片轮播图的实现的使用技巧和注意事项,需要的朋友参考一下 IOS 开发之网络图片轮播图的实现 截图 1.使用 2.源码 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍jQuery实现大图轮播,包括了jQuery实现大图轮播的使用技巧和注意事项,需要的朋友参考一下 css样式: js代码规范: 主体代码: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!