美文网首页
三张图片实现轮播效果

三张图片实现轮播效果

作者: pingui | 来源:发表于2016-04-14 14:02 被阅读1284次
    #ifndef W_H_
    #define W_H_
    // 获取屏幕的宽度
    #define WIDTH  [UIScreen mainScreen].bounds.size.width
    // UIScrollView和UIImageView的高度
    #define HEIGHT 180
    #endif
    
    #import "ViewController.h"
    
    @interface ViewController ()<UIScrollViewDelegate>{
        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
    
    轮播效果.png

    相关文章

      网友评论

          本文标题:三张图片实现轮播效果

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