使用iCarousel的旋转木马效果请求图片

简介:

使用iCarousel的旋转木马效果请求图片

https://github.com/nicklockwood/iCarousel

先看看效果:

 

 

源码如下:

//
//  RootViewController.m
//
//  Created by YouXianMing on 14-5-16.
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "iCarousel.h"
#import "YXJSON.h"
#import "YXGCD.h"
#import "SDWebImage.h"

// 数据源
#define SOURCE_DATA @"http://www.duitang.com/album/1733789/masn/p/0/50/"

@interface RootViewController ()<iCarouselDataSource, iCarouselDelegate>

@property (nonatomic, strong) iCarousel      *carousel;   // iCarousel
@property (nonatomic, strong) NSMutableArray *dataArray;  // 数据源

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 初始化数据源
    _dataArray = [[NSMutableArray alloc] init];
    
    // 初始化iCarousel
    self.carousel = [[iCarousel alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:_carousel];
    _carousel.backgroundColor = [UIColor blackColor];
    _carousel.type = iCarouselTypeWheel;
    
    // 设置代理
    self.carousel.delegate   = self;
    self.carousel.dataSource = self;
    
    
    // 异步加载数据
    [[GCDQueue globalQueue] execute:^{
        // 获取json数据
        NSData *data = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:SOURCE_DATA]];
        
        // 转换为字典
        NSDictionary *dataDic = [YXJSON dictionaryOrArrayWithJSONSData:data];
        if (dataDic)
        {
            NSArray *dataArray = dataDic[@"data"][@"blogs"];
            for (NSDictionary *dic in dataArray)
            {
                NSLog(@"%@", dic[@"isrc"]);
                
                // 存储数据
                [_dataArray addObject:dic[@"isrc"]];
            }
        }
        
        // 主线程更新
        [[GCDQueue mainQueue] execute:^{
            
            // 重新加载carousel
            [_carousel reloadData];
        }];
    }];
}

#pragma mark -
#pragma mark iCarousel methods
- (NSUInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
    // 元素个数
    return [_dataArray count];
}

- (UIView *)carousel:(iCarousel *)carousel
  viewForItemAtIndex:(NSUInteger)index      // view的标志
         reusingView:(UIView *)view         // 重用的view
{
    if (view == nil)
    {
        view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300.0f, 400.0f)];
    }
    
    // 强行转换指针
    UIImageView *pointView = (UIImageView *)view;
    
    // 使用SDWebImage异步下载图片
    [pointView setImageWithURL:[NSURL URLWithString:_dataArray[index]]];
    
    // 图片自动适应
    pointView.contentMode = UIViewContentModeScaleAspectFit;
    
    return view;
}

- (CGFloat)carousel:(iCarousel *)carousel
     valueForOption:(iCarouselOption)option
        withDefault:(CGFloat)value
{
    if (option == iCarouselOptionSpacing)
    {
        return value * 1.1f;
    }
    
    return value;
}

@end

RootViewController.m

以下几个地方使用了本人自己封装的类,不开源,看官请自行替换相关方法-_-!

核心的地方如下:

so easy :)

 

 

问:如何实现view的点击事件?

实现协议方法 - (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index; 即可

 

问:如何获取偏移量?

实现协议,然后如下使用

- (void)carouselDidScroll:(iCarousel *)carousel
{
    NSLog(@"scrollOffset %f", carousel.scrollOffset);
}

 

目录
相关文章
|
27天前
|
前端开发 JavaScript
无缝滚动图片——源码
无缝滚动图片——源码
10 1
|
2月前
|
PHP
网站三合一缩略图片介绍展示源码
网站三合一缩略图片介绍展示源码
54 3
网站三合一缩略图片介绍展示源码
|
5月前
|
前端开发 定位技术 API
前端切图:调用百度地图API
前端切图:调用百度地图API
31 0
|
8月前
|
前端开发
react图形图片验证码重新请求图片不刷新
react图形图片验证码重新请求图片不刷新
|
前端开发 JavaScript
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
|
移动开发
【笔记】一行代码完成——h5页面上滑图片渐隐
一行代码完成——h5页面上滑图片渐隐
121 0
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
112 0
JAVAWEB将图片铺满整个页面的方法
JAVAWEB将图片铺满整个页面的方法
309 0
|
前端开发
前端网页让照片动起来
前端网页让照片动起来
101 0
前端网页让照片动起来