三张图片实现轮播效果

#ifndef W_H_
#define W_H_
// 获取屏幕的宽度
#define WIDTH  [UIScreen mainScreen].bounds.size.width
// UIScrollView和UIImageView的高度
#define HEIGHT 180
#endif

#import "ViewController.h"

@interface ViewController (){
    UIScrollView *myScrollView;
    // 左边图片
    UIImageView *leftImageView;
    // 中间图片
    UIImageView *centerImageView;
    // 右边图片
    UIImageView *rightImageView;
    NSArray *imageNameArray;
    // 数组下标
    NSInteger index;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor yellowColor];
    
    // 将图片添加到数组中
    imageNameArray = @[@"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", @"6.jpg", @"7.jpg", @"8.jpg", @"9.jpg", @"10.jpg"];
    index = 0;
    [self creatScrollView];
    [self addImageViews];
}

// 创建UIScrollView
- (void) creatScrollView{
    myScrollView = [[UIScrollView alloc]init];
    myScrollView.frame = CGRectMake(0, 100, WIDTH, HEIGHT);
    // 指定UIScrollView的contentSize
    myScrollView.contentSize = CGSizeMake(3 * WIDTH, HEIGHT);
    // contentSize的偏移量始终在中间
    myScrollView.contentOffset = CGPointMake(WIDTH , 0);
    myScrollView.pagingEnabled = YES;
    // 绑定委托
    myScrollView.delegate = self;
    [self.view addSubview:myScrollView];
}

-(void)addImageViews{
    leftImageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
    leftImageView.image = [UIImage imageNamed:imageNameArray[imageNameArray.count - 1]];
    [myScrollView addSubview:leftImageView];
    
    centerImageView=[[UIImageView alloc]initWithFrame:CGRectMake(WIDTH, 0, WIDTH, HEIGHT)];
    centerImageView.image = [UIImage imageNamed:imageNameArray[index]];
    [myScrollView addSubview:centerImageView];

    rightImageView=[[UIImageView alloc]initWithFrame:CGRectMake(WIDTH * 2, 0, WIDTH, HEIGHT)];
    rightImageView.image = [UIImage imageNamed:imageNameArray[index + 1]];
    [myScrollView addSubview:rightImageView];
}

#pragma mark UIScrollViewDelegate方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    [self reloadImage];
    // 让UIScrollView的偏移量保持在中间位置 也就是说界面上显示的始终是UIScrollView的中间那张图片
    [myScrollView setContentOffset:CGPointMake(WIDTH, 0) animated:NO];
}

// 滚动结束时获取新的图片
-(void)reloadImage{
    NSInteger leftImageIndex,rightImageIndex;
    CGPoint offset = [myScrollView contentOffset];
    // 向右滑动
    if (offset.x > WIDTH) {
        index = (index + 1) % imageNameArray.count;
    }
    // 向左滑动
    else if(offset.x < WIDTH) {
        index = (index + imageNameArray.count - 1) % imageNameArray.count;
    }
    centerImageView.image = [UIImage imageNamed:imageNameArray[index]];
    leftImageIndex=(index + imageNameArray.count - 1) % imageNameArray.count;
    leftImageView.image = [UIImage imageNamed:imageNameArray[leftImageIndex]];
    rightImageIndex=(index + 1) % imageNameArray.count;
    rightImageView.image = [UIImage imageNamed:imageNameArray[rightImageIndex]];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
三张图片实现轮播效果_第1张图片
轮播效果.png

你可能感兴趣的:(三张图片实现轮播效果)