轮播图的实现步骤

Posted 雷坤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图的实现步骤相关的知识,希望对你有一定的参考价值。

1>.h声明属性

@interface RootView : UIView

@property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) UIPageControl *pageControl;

2>.m实现步骤

@implementation RootView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 添加子视图
        [self addAllViews];
    }
    return self;
}

// 添加子视图
- (void)addAllViews
{
    // 布局scrollView
    // 1. 创建对象
    self.scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
    // 2. 定义属性
    // 苹果4s分配的内存: 30W 5s: 80w 6s: 100;
    // 设置滚动范围
    self.scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.frame) * 7, 0);
    // 在scrollView上放上7张图片
    for (int i = 0; i < 7; i ++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame) * i, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
        
        NSString *name = [NSString stringWithFormat:@"%d.png", i + 10];
        
        
        imageView.image = [UIImage imageNamed:name];
        
        // 将imageView添加到scrollView上
        [self.scrollView addSubview:imageView];
        
        
    }
    // 设置整页滑动
    self.scrollView.pagingEnabled = YES;
    
    // 3. 添加到父视图
    
    [self addSubview:self.scrollView];
    
    // 布局pageControl
    self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame) - 40, CGRectGetWidth(self.frame), 40)];
    self.pageControl.backgroundColor = [UIColor grayColor];
    // 小圆点的个数
    self.pageControl.numberOfPages = 7;
    // 当前小圆点的个数
    self.pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    // 没有被选择的小圆点
    self.pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
    [self addSubview:self.pageControl];
    
}

3>在ViewController里设置UIScrollView的代理Delegate和给UIPageControl添加事件

@interface RootViewController ()<UIScrollViewDelegate>
@property (nonatomic, strong) RootView *rootView;
@end

@implementation RootViewController

- (void)loadView{
    self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = self.rootView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 4. 设置代理
    self.rootView.scrollView.delegate = self;
    
    //给pageControl添加事件
    [self.rootView.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged];
    
    // 开始添加计时器,实现自动滚动
    [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timeAction:) userInfo:nil repeats:YES];
    
}

// 实现自动滚动
- (void)timeAction:(NSTimer *)time
{
    NSLog(@"定时");
    // 获取当前pageControl(页数)
    NSInteger index = self.rootView.pageControl.currentPage;
    // 如果不是最后一页, 向后偏移一页
    if (index != self.rootView.pageControl.numberOfPages - 1) {
        
        index++;
    } else if (index == self.rootView.pageControl.numberOfPages - 1){
        // 如果是最后一页,跳到第一页
        index = 0;
    }
     // 通过index修改scrollView的偏移量
//    self.rootView.scrollView.contentOffset = CGPointMake(index * CGRectGetWidth(self.view.frame), 0);
    [self.rootView.scrollView setContentOffset:CGPointMake(index * CGRectGetWidth(self.view.frame), 0) animated:YES];
    self.rootView.pageControl.currentPage = index;
}

// 实现点击pageControl方法
- (void)pageControlClick:(UIPageControl *)pageControl
{
    
    // 小圆点位置
    NSInteger currentIndex = self.rootView.pageControl.currentPage;
    
//    self.rootView.scrollView.contentOffset = CGPointMake(currentIndex * self.view.frame.size.width, 0);
    
    [UIView animateWithDuration:0.5 animations:^{
            self.rootView.scrollView.contentOffset = CGPointMake(currentIndex * self.view.frame.size.width, 0);
    }];
}

// 实现代理方法

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 改变pageCotrol的当前显示的位置
   
    // 获取当前显示的位置
    CGFloat currentX = self.rootView.scrollView.contentOffset.x;
    self.rootView.pageControl.currentPage = currentX / self.view.frame.size.width;
    
}

 

以上是关于轮播图的实现步骤的主要内容,如果未能解决你的问题,请参考以下文章

Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程

Android使用ViewPager实现轮播图(自动和手动)

无缝轮播图的一种方式原理

简单轮播图的实现及原理讲解(js)

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)

AXURE 8弄一个轮播图的步骤